#loading an image based on user input (electron-vue, webpack build tool)

74 messages · Page 1 of 1 (latest)

gloomy matrix
#

what is user input?

brave ruin
#

input type="file"

gloomy matrix
#

so?

brave ruin
gloomy matrix
#

read the article

brave ruin
#

am reading it

#

i tried to use the FileReader to read the img but i got : Error: Cannot find module 'original-fs'

#

but when i try access it via the console i found it 😩

gloomy matrix
#

FileReader?

#

its build in feature in web

#

you dont need any module for it

brave ruin
#

i don't know why am getting this error

gloomy matrix
#

i dont know either

brave ruin
gloomy matrix
#

remove incorrect imports from your code

brave ruin
#

true

#

an imported by vsCode which i didn't notice

#

it worked perfectly , now when i should store the image path in the db however the FileReader take the whole files[0], should store it as a json in the db ?

#

thanks for helping

gloomy matrix
#

how familiar you with web and js?

brave ruin
#

good enough i think

gloomy matrix
#

then what path, what db, why is take files[0] and why json?

#

and why you use FileReaded

brave ruin
#

to read the file
i know the readAsDataURL takes the file instance as an argument, so passing only the file path will not work , that's why i asked in which form should store the file
i know i can store a file ref 'file path' read it on the mainProcess using fs then send the file instance to renderer and read it using FileReader...

#

i was looking for something shorter only

gloomy matrix
#

you cant pass file via ipc

brave ruin
#

so what to do ?

gloomy matrix
#

do what?

#

what do you mean by read file?

brave ruin
#

hahah sorry bro i disturbed you

gloomy matrix
#

you need byte array?

#

or you want to show it in browser

brave ruin
#

that is the scenario :

#

user select an image for 'membership info'
i used the fileReader to display it,
when user confirm the membership i take the form data 'including the selected image ' and store theme in the db
know when fetching data and displays the members how to display those images
saying that import() method will not work

gloomy matrix
#

to display it you need only path to file

brave ruin
#

the images needs to be loaded dynamicaly

gloomy matrix
#

what do you mean by dynamicaly?

#

you can load any image by changing src attribute

#

any time

brave ruin
#

bro you said i need only a path ? ok
when the user select an image i take that path and set it to img src attr, the app throw an error

gloomy matrix
#

what error?

brave ruin
#

not allowed to load local resouces

gloomy matrix
#

well thats becase browser not allowed to load local files from web server by security reasons

brave ruin
#

yes i know

#

it's electron

#

is there a work around

#

without changing securtiy settings ?

gloomy matrix
#

depends

#

if your app is offline or online

brave ruin
#

basicaly it's offline but i want to add some auto update

gloomy matrix
#

i mean from where you load web page

brave ruin
#

offline

gloomy matrix
#

if you load it from dev web server

#

in development

#

you can disable security for development

#

because when you start to load it from file protocol error goes away

brave ruin
#

in production it's load from file protocol ?

gloomy matrix
#

mmm

#

yes

#

when you build it

#

and usually break hash routers

#

in vue and react

brave ruin
gloomy matrix
#

now build it

brave ruin
#

and

gloomy matrix
#

and run it

#

from exe

brave ruin
#

yes true

#

fiexd

#

on production

#

thanks a lot bro you saved me a lot of time

gloomy matrix
#

for development you can add to webPreferences webSecurity: !app.isPackaged