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

Mickey58

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?

arlecchino

Are you using image files to test it?

https://github.com/quasarframework/quasar/blob/eccbd3242d00f5303120689211b5712ce1c78737/ui/src/components/uploader/QUploaderBase.js#L289
https://github.com/quasarframework/quasar/blob/eccbd3242d00f5303120689211b5712ce1c78737/ui/src/components/uploader/QUploaderBase.js#L312

You can give no-thumbnails prop a try.

arlecchino

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.

Mickey58

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.

Mickey58

@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.

arlecchino

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…