Add an ability to include images

[ghost]

I love this editor so much it is an awesome tool. Currently there is no provision to add images it would be useful when having static image files in a directory instead of fetching from a URL.

[CompuIves]

Thanks for the kind words! This is feature is high in the pipeline, I'm planning to release this somewhere at the end of the month or next month. 😄

[omarirose]

Was this feature ever implemented?

[CompuIves]

Sadly not, it's not very hard to implement though. We support it, but don't have a UI for it.

If we supply the field isBinary with the create file (createModule) it will be recognized as an image. Is someone interested in implementing that?

[wuweiweiwu]

@CompuIves I'd like to take it if its not already taken :)

[CompuIves]

That would be really great @wuweiweiwu!

I think the best implementation would be to add the option to create a 'Binary File', a binary file is a file marked with isBinary. An example is public/favicon.ico in https://codesandbox.io/s/github/CompuIves/codesandbox-test-git-app. These files can be created by adding isBinary: true to the payload when calling the API to create a module.

[wuweiweiwu]

@CompuIves Sounds good! I'll get on it!

[wuweiweiwu]

@CompuIves I was thinking of adding a upload image button by the add file. And then sending the payload with the image and isBinary: true

Would that work?

[CompuIves]

Interesting, then we'd have an upload version immediately as well. I like it, that'd work!

We don't have an upload endpoint yet, but I can make this soon.

[wuweiweiwu]

@CompuIves A thing that I don't fully understand is that creating a binary file like favicon.ico in the example. When you send the request for that, is the link to the actual resource sent in the payload? I mightve misunderstood

[CompuIves]

That's how we currently handle binary files, the code is just a url to the resource.

We still want to add an upload service that allows the user to upload a file, we return the url which in turn will be placed in the code.

For example, if you want to upload an image then I imagine we'd first do an upload to an endpoint like /api/v1/upload. That would then return a URL which can be used for the POST to /api/v1/sandboxes/:id/modules with payload:

{
  title: "the-title",
  code: "the url",
  isBinary: true
}

[wuweiweiwu]

@CompuIves I have it rewritten using the cerebral modules :) But blocked on #545. Can't create a new project to test it.

Hope that can get resolved soon Thanks!

[wuweiweiwu]

@CompuIves Seems like the is_binary key in the post request no longer creates files with 'code' field as links. I also noticed that isBinary is converted to is_binary when you send the request.

Does the api still support isBinary key?

request:

{
   "module":{
      "title":"testing.png",
      "directory_shortid":null,
      "code":"https://i.imgur.com/LQGuBMY.png",
      "is_binary":true
   }
}

response:

{
   "data":{
      "title":"testing.png",
      "source_id":"e8c99616-ec4c-440a-a74a-c4d2a2479453",
      "shortid":"2EJ2v",
      "is_binary":true,
      "id":"3f6c4eaf-1a9b-457f-a9e9-b164d29c4eea",
      "directory_shortid":null,
      "code":"https://i.imgur.com/LQGuBMY.png"
   }
}

But creates the file testing.png as a blank file

[lbogdan]

Added in #685 .

[vickylance]

@lbogdan I see that image uploading is working but loading the images via JS import in parcel vallila tamplate is not working