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