[Solved] How to deal with @added event/method in q-uploader



  • I’m using q-uploader to upload files. I managed to define the upload server part and a q-uploader factory function which is handling the general upload logic. After the upload I successfully run another method at the @uploaded event which allows me to store the file name of the uploaded file in my backend database.

    Now I would like to get more control before the upload happens. I would like to run a method at the @added event (when a file is added to the upload list). That part doesn’t work in my code below.

    Here is my q-uploader code:

    <q-uploader
       ref="uploader"
       url="http://localhost:4444/upload/"
       label="Datei hochladen für internen Link"
       :upload-factory="factoryFunctionForQUploader"
       @added="bestätigungFallsInternerLinkDefiniert"
       @uploaded="storeNameOfUploadedFile"
       :disable="computeSelectedRowsTableBauinformationen"
       :multiple="false"
     />
    

    Here is my q-uploader factory function - honestly I’m not quite sure about the adequacy of that piece, since I copied the code from some sample. Surprisingly, the upload and the @uploaded logic (not the @added) works even, if I disable that :upload-factory…so I’m unsure whether that factory function is needed and what it needs to do in combination with the various @events:

        factoryFunctionForQUploader: function(file, updateProgress) {
          return new Promise((resolve, reject) => {
            resolve(file);
          });
        },
    

    Here is my @uploaded method (that code gets successfully called after an upload and works 100% fine):

    storeNameOfUploadedFile: function(info) {
          console.log("In storeNameOfUploadedFile - info.files[0].name: ", info.files[0].name); 
          this.$set(this.selectedRowsTableBauinformationen[0], "internerLink", "statics/pdfs/" + info.files[0].name);
          this.submitAusgewählteBauinformationAusQTable();  // Store file name of uploaded file in database
    },
    

    Now the code that I want to run at @added - but that method gets never called, although the rest of q-uploader works fine:

    bestätigungFallsInternerLinkDefiniert: function(files) {
         
     console.log("In bestätigungFallsInternerLinkDefiniert - files[0].name: ", files[0].name);
     if (this.selectedRowsTableBauinformationen[0].internerLink !== undefined) {
            // Issue q-dialog for a warning with confirmation:
            this.confirmUploadInternerLinkBauinformationenAusQTable = true;
       }
     },
    

    What is wrong about my code? The factory function? The parameter passing to the method called @added?





  • Ah, and I think it is not upload-factory, just factory(files: Array).
    But this shouldn’t be the problem of @added, it is simply ignored in your code.



  • Yes, I now realize that the signature of the factory function changed between Quasar V0.x and V1.x versions. So I changed my factory function accordingly, but that does not play a role in the issue that @added is ignored.
    I’m using pdf and jpg files to test. All file types are uploaded successfully. So that does not play a role either for the @added issue.
    And I tried no-thumbnails, that doesn’t affect @added either.

    The issue of ignoring of @added is still there.



  • @arlecchino, thanks for helping. I now discovered the simple reason for the @added issue: I have been using a method name that has an “umlaut” “ä” (German “ae”) in the method name for @added…changing that gets the @added method called. The factory function looks like it is unnecessary for my use case, so I’m going to disable it.



  • Strange, I was thinking about the Umlaut… but then thought this should only be a problem if function and caller are in two files with different encoding. Not the case here.
    But maybe because it is first a string, which needs to be handled the right way…


Log in to reply