Uploading files

Parse Server šŸ“”
1

Does anybody know how to realize uploading files in parse-server 6.0.0 ?
Where I can read about it?
The parse-server docs is a hell for beginners!

2

Do you have a specific problem? What client platform are you using? What have you tried so far? Please help the community help you :slight_smile:

To get you started: hereā€™s the JavaScript File docs, which I found very approachable.

3

Thanks.
Iā€™ve read this guide as well as others but in my opinion there is critically little information in these documents:

https://docs.parseplatform.org/js/guide/#creating-a-parsefile
https://docs.parseplatform.org/rest/guide/#uploading-files
https://docs.parseplatform.org/graphql/guide/#create-a-file

Soā€¦

For example, when I try to follow guidesā€™ examples and try to upload a file (via Parse Dashboard GraphQL API Console) I receive an error:
ā€œupload.arrayBuffer is not a functionā€. Where can I find an answer - why?

4

Hi @VKlapan this topic was answered on GitHub.

5

Unfortunately not.
This is my topic and it is open for me yet.

Iā€™ve sent another question at that topic and can gladly re-post it here:

Soā€¦
Iā€™ve tried to use information from examples: GitHub - jaydenseric/graphql-multipart-request-spec: A spec for GraphQL multipart form requests (file uploads).
but with zero result (

For example, I have a question:
Is this example correct and it has to work?

But I have error: {ā€œerrorā€:ā€œUnexpected token - in JSON at position 0ā€}
Why?

6

Here is how to upload a file image via JS SDK,

Frontend:

    Parse.initialize(process.env.NEXT_PUBLIC_APP_ID);
    Parse.serverURL = `${process.env.NEXT_PUBLIC_SERVER_URL}/parse`;
    const newImage = new Parse.File("image.png", { base64: //base 64 string | you can get it from canvas.toDataURL(ctx) });
    await newImage.save();

    const response = await Parse.Cloud.run("uploadProfileImage", {
      url: newImage.url(),
    });

Server:

Parse.Cloud.define("uploadProfileImage", async (req) => {
  const { url } = req.params;

try {
const user = await new Parse.Query(Parse.User)
.equalTo("objectId", req.user.id)
.first({useMasterKey:true});

if (user) {
   user.set("img", url);
}
await user.save(null, {useMasterKey:true});

   return {sts: true, msg: "image uploaded"}
} catch (err) {
   throw err;
});

Note that if you want your files to be stored in a bucket like AWS S3 or DO spaces you need to configure the adapted in the server settings.

For videos use:

    const newVideo = new Parse.File("video.mp4", { uri: data.vUrl });
    await newVideo.save();
7

Thanks,

Let me try it)

8

With this approach, any user can modify another usersā€™ profile image as long as they have their userId (or guess it), which could be problematic.

A refactor of this cloud function would be:

Parse.Cloud.define("uploadProfileImage", async (req) => {
  const { url } = req.params;
  const user = req.user;
   user.set("img", url);
   await user.save(null, {useMasterKey:true});
   return {sts: true, msg: "image uploaded"}
}, {
  requireUser: true,
  fields: ['url']
});

More preferred you should be able to do it all on the frontend:

Parse.initialize(process.env.NEXT_PUBLIC_APP_ID);
Parse.serverURL = `${process.env.NEXT_PUBLIC_SERVER_URL}/parse`;
const newImage = new Parse.File("image.png", { base64: //base 64 string | you can get it from canvas.toDataURL(ctx) });
await newImage.save();
const user = Parse.User.current();
user.set("img", newImage);
await user.save();
1 Like
9

A few more details:

I have this error on my parse server 6.0.0 :

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

Does anybody know how to fix it ?

10

Make sure youā€™re not calling res.send() or res.json() more than once in a single request

11

UPD

Hi everyone!

I donā€™t know either it is an issue or feature but:

I can use a files uploading feature without errors (error: {ā€œerrorā€:ā€œUnexpected token - in JSON at position 0ā€}) only if I set ā€˜/parseā€™ as a mount point in serverā€™s config

I need your help!

12

I might be wrong but check that your input is { base64: // base 64 string }, and not just //base 64 string. I.e. the function accepts an object with a base64 key. So make sure your input is formatted like so.

13

I have a differnt issue - after uploaded - the video wonā€™t play on Chrome. - plays on safari and firefox and other vides do play on chrome - i uploded one that plays on chrome - then after the upload it wonā€™t play