Uploading files

[VKlapan]

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!

[dr_barto]

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

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

[VKlapan]

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

Parse

Parse

Parse

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?

[Moumouls]

Hi @VKlapan this topic was answered on GitHub.

Error: upload.arrayBuffer is not a function

[VKlapan]

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?

GitHub - jaydenseric/graphql-multipart-request-spec: A spec for GraphQL...

But I have error: {“error”:“Unexpected token - in JSON at position 0”}
Why?

[andreisu]

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

[VKlapan]

Thanks,

Let me try it)

[dblythy]

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

[VKlapan]

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 ?

[andreisu]

@VKlapan

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

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

[VKlapan]

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!

[andreisu]

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.