q-uploader - how to setup name a attribute of the input field



  • Hello Folks,

    Hope you are doing well ?

    I am using the q-uploader component and still wondering how to use the url and pass the right information to make the PHP upload works. Please find out below sample of the codes :

    1/ q-uploader component

    <q-uploader
                label="Upload a file"
                method="POST"
                name="userfile"
                url= "https://my-domain/donothing.php"
                color="purple-3"
                flat
                bordered
                style="max-width: 300px"
                auto-upload
                @added="uploadFile"
              />
    

    2/ uploadFile method

    uploadFile(files) {
          const formData = new FormData();
          formData.append('userfile', files[0]);
          fetch('https://my-domain/upload.php', {
            method: 'POST',
            body: formData,
          });
        },
    

    3/ upload.php file

    <?php
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    $uploaddir = 'uploads/';
    $uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
    
    echo '<pre>';
    if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
        echo "success";
    } else {
        echo "error";
    }
    print_r($_FILES);
    
    echo '</pre>';
    ?>
    

    It works when using the fetch method but the code looks weird as q-uploader’ url is setup with a dummy value ‘…/donothing.php’

    Could you please tell me how to get rid of the @added event in the q-uploader and make the code simpler.

    Thanks

    KR/



  • Add : to url. Try this:

                      <q-uploader
                        :url="upload_url"
                        style="max-width: 600px"
                        accept=".jpg, image/*"
                        @uploaded = "upload_ok"
                      />
    
    upload_url: window.axios.defaults.baseURL + '/upload', // your backend
    

Log in to reply