ackvonhuelioLvl 41so im makin an app lab project for school, and in app lab there's a widget which allows the user to select and upload a file from their computer. However, this file is turned into a link which only works temporarily (the image stops working upon reload), is there any non-exploity way to allow an image to actually upload?
[WUT] AdamLvl 13No. There's no "non-exploity" way to actually upload and store an image.
adam
:D
found yah
DragonFireGamesLvl 11I would recommend using a file hosting service like imgbb and then use the uploaded image url.
ackvonhuelioLvl 41DragonFireGames
the idea was for users to be able to upload images, but i changed it so you just enter an image url
DragonFireGamesLvl 11ackvonhuelio Perhaps you could send the generated image link to a custom backend and host it there.
Letti42Lvl 6DragonFireGames doesnt work like that, photo select on code.org uses a local object to store the image
Binary_CoderLvl 2ackvonhuelio There is a way to upload images and save them, but to get it to work, you have to get image data using the canvas element and then split it up to store it in a big key value or data table. I made this proof of concept- if you press the download button you can see it load in an image from the data tables.
The downside of this method is that the time it takes to upload increases exponentially with a bigger image. It also can't display the image using an image element, only the canvas element, so all uploads will be of slightly lower quality.
JibberjayDragonFireGamesLvl 11Letti42 Perhaps you could do what Binary_Coder was talking about with the image data and then send that to a custom backend for storage. That should at least allow for higher quality uploads, larger data storage, and quicker downloads. I'm not as familiar with app lab though, so it may still not be possible.
Binary_CoderLvl 2DragonFireGames The upload quality has to do with the way images are rendered on the canvas, and you can only get the image data using the canvas, so lower quality images are kind of inevitable. But a custom backend could enable much faster upload speeds, as long as the data limit is big enough.
DragonFireGamesLvl 11Binary_Coder I could try and set up a demo. I'm already working on my backend right now anyway. Speaking of that, I should probably ask for help at this point.
VarrienceLvl 25i forget if this is a thing.... if there is a way to extract pixel values from applab or image data, you could simply write that to a table in base 64 and then load it in when necessary
DragonFireGamesLvl 11Varrience You can get it from a canvas like @Binary_Coder had said, I haven't found another way yet.
DragonFireGamesLvl 11I noticed that the uploaded image url is a blob URL, I wonder if you could do anything with that.
altZanyLvl 1I tried that like a million times with a million different variations it doesn't work (then again, I am not an expert at code.org stuff)... But I think there is a way through the code.org api to view images from other projects that actually have a link that's not a blob url.
VarrienceLvl 25well technically all you'd have to do is the correct b64 start method it'll work in any browser though i mainly forgot how it goes since it's been ages since I've used it idk if CDO allows data:image/png;base64,<encoded content>
or i wonder if there's an event that you can check for once the upload happens to possibly extract the data.... knowing CDO it's probably not implemented
or possibly if you want it to exist past one session you could try caching it in the /media?u= tab which handles images and audio
VarrienceLvl 25ackvonhuelio I've currently have a method though it takes time to save and decode https://studio.code.org/projects/applab/j4nJKiJHa1zhLFMMSkXHJjCQm8XqtA89ZyTwSTjCQdQ/view this may be a good permanent solution you were looking for, like binary said you can do it this way i thought so as well so i dug a little and made a little interface which allows uploaded images to be saved in CDO permanently rather than it being lost in the cache
it could be faster if i manually encased it in b64 but i can't be bothered to implement it correctly.... though if you have file encoding knowledge it might be possible to make this method even quicker than mine
birthdayboy224Lvl 2Binary_Coder If you split a big image into multiple small images, would it load faster?
[WUT] AdamLvl 13birthdayboy224 I'm not an expert so take what I say with a grain of salt, but I would assume that since it's still loading the same amount of data, it'll take the same amount of time.
Binary_CoderLvl 2birthdayboy224 Yeah @[WUT] Adam is right, you can split up the image as much as you want but in the end, you still have to save every pixel. The demo I made does actually split up the image data into 40 smaller arrays, but only to make sure that the array isn't too big.
Actually, splitting up the image might take longer to save, since it has to execute more requests.
