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

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

    Help
    2
    6
    1355
    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
      Mickey58 last edited by 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?

      1 Reply Last reply Reply Quote 0
      • arlecchino
        arlecchino last edited by

        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.

        1 Reply Last reply Reply Quote 0
        • arlecchino
          arlecchino last edited by

          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.

          1 Reply Last reply Reply Quote 0
          • M
            Mickey58 last edited by

            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.

            1 Reply Last reply Reply Quote 0
            • M
              Mickey58 last edited by

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

              1 Reply Last reply Reply Quote 0
              • arlecchino
                arlecchino last edited by

                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…

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post