Uploading files

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!

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.

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

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?

Hi @VKlapan this topic was answered on GitHub.

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?

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();

Thanks,

Let me try it)

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

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 ?

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

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!

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.