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

monkhack

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/

ilabutk

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