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

    I need suggestions

    Help
    4
    40
    2397
    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.
    • beets
      beets @Incremental last edited by

      @incremental

      Instead of controlling max filesize before upload, could it be simple to myself resize and compress the uploaded file, or do you recommend a light vue component ?

      I haven’t used a crop / resize component for Vue before, but I know they exists. The other way some people do is to write the image to canvas, resize, and POST the base64 data.

      to continue, I try to send this blob to my profile route API on October CMS

      So it maybe sounds like you are already using the canvas trick I mentioned above? If so, you will need to convert the blob like so: https://stackoverflow.com/a/18650249

      If you’re just trying to send the file as is, I would not send a blob to the server, Instead see the code from post #2 here:

      const formData = new FormData()
      formData.append('somefield', 'somevalue') // append other fields
      
      if(this.newAvatar) {
        if(this.newAvatar.file instanceof File) {
          formData.append('avatar', this.newAvatar.file)
        }
      }
      
      // Submit FormData through axios
      
      

      I’m not sure if October CMS handles file uploads specially, but normally they’d be in the $_FILES global: https://www.php.net/manual/en/reserved.variables.files.php

      I 1 Reply Last reply Reply Quote 0
      • I
        Incremental @beets last edited by

        @beets well I don’t know what a canvas is, I just used your code with FileReader to load a picture and user-avatar.vue to display it.
        I’m not sure if my axios call is correct.
        Before sending image, it was working with :

        changeProfile({ commit }, profile) {
           axiosInstance
              .post(constantes.SERVER_URL + "/Change-Profile", profile.data)
              .then(response => {
        

        with the image I found that I had to modify the header, but now in my API I don’t retrieve the parameters as before.
        What could be wrong in Axios ?

        changeProfile({ commit }, profile) {
           const config = { headers: { 'Content-Type': 'multipart/form-data' } };
           axiosInstance
              .post(constantes.SERVER_URL + "/Change-Profile", profile.data, config)
              .then(response => {
        
        beets 1 Reply Last reply Reply Quote 0
        • beets
          beets @Incremental last edited by

          @incremental Instead of this:

          const profile_data = new URLSearchParams();
          profile_data.append("email", this.Email);
          ...
          profile_data.append("avatar", this.newAvatar);
          this.$store.dispatch("server/changeProfile", {	data: profile_data }); // AXIOS call
          

          Try:

          const profile_data = new FormData()
          profile_data.append("email", this.Email);
          ...
          if(this.newAvatar) {
            if(this.newAvatar.file instanceof File) {
              profile_data.append('avatar', this.newAvatar.file)
            }
          }
          
          this.$store.dispatch("server/changeProfile", {	data: profile_data }); // AXIOS call
          
          I 1 Reply Last reply Reply Quote 0
          • I
            Incremental @beets last edited by

            @beets Thanks, it seems to work, it seems that I get binary for the avatar in the API. I now have to deal with October to store it.
            If I’ like to have an axios with authentication, is it acceptable to :

            const authorization = {	headers: { Authorization: "Bearer " + state.token } };
            const config  = { headers: { 'Content-Type': 'multipart/form-data' } };
            
            axiosInstance
               .post(constantes.SERVER_URL + "/Change-Profile", profile.data, config, authorization)
            

            or should I have an object like :

            const config  = { headers:
               { 'Content-Type': 'multipart/form-data' } ,
               { Authorization: "Bearer " + state.token }
            };
            
            beets 1 Reply Last reply Reply Quote 0
            • beets
              beets @Incremental last edited by

              @incremental I think you have to do the second one, but I don’t use axios very often.

              I 1 Reply Last reply Reply Quote 0
              • I
                Incremental @beets last edited by

                @beets hi,
                I get problems to retreive the pic in my October PHP API. The file created is not valid.
                According to these posts :
                https://octobercms.com/docs/database/attachments#creating-attachments
                https://stackoverflow.com/questions/47995242/october-cms-api-with-upload-file
                it seems that a blob is not expected…
                As it’s my first upload code, don’t you think I should reconsider the way I open, store and send the avatar in Vue, to finally just send the path file ?

                beets 1 Reply Last reply Reply Quote 0
                • beets
                  beets @Incremental last edited by

                  @incremental Hi, sorry for delay in responding. This code should attach a file:

                  if(this.newAvatar) {
                    if(this.newAvatar.file instanceof File) {
                      profile_data.append('avatar', this.newAvatar.file)
                    }
                  }
                  

                  At least it does when I try and read with Nodejs instead of PHP, but that shouldn’t make a difference. Can you post the whole function call that ends with the this.$store.dispatch("server/changeProfile", ... ) call ?

                  Otherwise, maybe try and remove the headers: { 'Content-Type': 'multipart/form-data' } header? I’m not sure if it’s needed with axios since I don’t use it much.

                  I 1 Reply Last reply Reply Quote 0
                  • I
                    Incremental @beets last edited by

                    @beets Well I solved the blob problem with the October API, with help on Stackoverflow and not October forums…
                    https://stackoverflow.com/questions/66276343/upload-a-blob-avatar-in-octobercms?noredirect=1#comment117187109_66276343

                    As this way of posting is not the one documented in October, I think I should modify my code for a “regular” file upload documented in October.
                    But I’m not sure of how to handle <q-file> to send a pic with axios ?
                    Just a File object ?

                    beets 1 Reply Last reply Reply Quote 0
                    • beets
                      beets @Incremental last edited by

                      @incremental Correct, just a file object should do, which is what the code I posted should be doing…

                      Can you post the whole function call that ends with the this.$store.dispatch(“server/changeProfile”, … ) call ?

                      It will help if you post that code so we can see if there’s anything obvious going on here. A blob really shouldn’t be POSTed to the server.

                      I 1 Reply Last reply Reply Quote 0
                      • I
                        Incremental @beets last edited by

                        @beets Well, it was as simple as :

                        	methods: {
                        		filePicked(file) {
                        			this.fileAvatar = file;
                        		},
                        
                        		onProfileChange() {
                        		....
                        			profile_data.append("avatar", this.fileAvatar);
                        			this.$store.dispatch("server/changeProfile", { data: profile_data	});
                        

                        Thanks again for your precious help !

                        As you seems very skilled, may I ask you an advice if you have, on Prettier and on the best backend for you ?
                        https://forum.quasar-framework.org/topic/7822/code-formatting?_=1614115998159

                        https://forum.quasar-framework.org/topic/7852/which-backend-for-quasar

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