I need suggestions
-
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 -
@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 => {
-
@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
-
@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 } };
-
@incremental I think you have to do the second one, but I don’t use axios very often.
-
@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 ? -
@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. -
@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_66276343As 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 ? -
@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.
-
@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?_=1614115998159https://forum.quasar-framework.org/topic/7852/which-backend-for-quasar