No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    2
    2
    419
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      monkhack last edited by 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/

      1 Reply Last reply Reply Quote 0
      • I
        ilabutk last edited by

        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
        
        1 Reply Last reply Reply Quote 0
        • First post
          Last post