I need suggestions

beets

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

Incremental

@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

@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

Incremental

@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

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

Incremental

@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

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

Incremental

@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

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

Incremental

@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