Previewing UPLOAD-IMAGE

Discussion Ask a question
1

Like the title already shows, i want to preview an IMAGE on my page —> BEFORE-UPLOAD ← on my page.

I know how to achieve this → by using the HTML-Component, but i can’t find a way of how to use for example Node-FS (File-System) to get it to work.

What do i need to know about FS ???

  1. Works only on Backend (checked) !!!
  2. Don’t have to install any NPM, because already included (checked),
  3. Am i able to open directly a FILE (for example an ordinary TXT-File) on my computer, without first have to upload the TXT-File???
  4. If there is no ability to open a Blob-Window directly, how to proceed else (workaround) ?
  5. What would be the right PSEUDO-CODE-CONSTRUCT to use FS ???
  6. How would look like a working —> PATH ?
    a) → c:/xxxx/yyyyy/zzzzz/text.txt <— ? (opening from local machine possible)
    b) → https://www.zzzzzzz.com/…/text.txt ???
  7. What else do i need to know, to be able to use FS the right way?

Example???

import fs from'fs';

let PATH = "??????????????";

let dataBuffer = fsExtra.readFileSync(PATH);
2

Ok, to be more precise…

I need the base64-code of an IMAGE before it gets uploaded.
How do i achieve my aim (by not using either an html-component, nor a custom-element) ?

  1. I am able to achieve my wished functionality → by using a html-component.
  2. I am able to achieve the same functionality → by using a custom-element.
  3. But how to generate such a function → but not using the both at all?

I want to extract the base-64-code of an image before it gets uploaded.
That means directly after selecting an image inside a BLOB (File-System).

Do i mix something up ???

3

Ok, i will reply to my own post :wink:.

Ok, Velo-Ninja has found his solution.
At least i was not able to work without using (either a custom-element or an html-component) .

But at the end i don’t have first to upload the image with the upload-button to my Wix-File-Manager, just to have the possibility to preview the picture —> sorry when i tell this, but → what a bullshit? <— .

Imagine that i have a app which handles with 1000 of pictures which has a preview for the pics i am getting from my loacal PC → do i have to upload all that pics → just to be able to preview them ???

:stuck_out_tongue_winking_eye:!!! NO → SURELY → NOT !!!:stuck_out_tongue_winking_eye:

Why do the → UPLOAD-BUTTON <— not provide base64-Data before uploading the image file ? :eyes: to be able to generate a image-preview ?

However, this issue was again resolved by using an HTM-Component.
Working stable & fast.

But still my question: → Is it possible to use → fs.readFileSync(PATH), or fsExtra.readFileSync(PATH); ← in my case to be able to generate the same PREVIEW-FUNCTIONALITY but avoiding the usage of an HTML-Component or Custom-Element?

Or do i have a leck of knowledge in this case?

Getting some ideas appreciated though.

4

Almost a YEAR → and no answers xD, hmmmm.