[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?
-
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#L312You can give
no-thumbnails
prop a try. -
Ah, and I think it is not
upload-factory
, justfactory(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…