Image picker and uploader in Rails - javascript

If have done some research but haven't been able to find a good solution to this problem:
I'm building a Shopify app that lets the merchant create a small design to show on the product page, the design includes an image/icon.
I want the user to be able to choose from a list of icons or upload her/his own in the form when creating/editing a design.
How is this best achieved?
I can find out how to make the upload part with active storage. But to have some existing icons for the user to pick out, is where i struggle?
The plan was to use AWS Cloudfront to store these icons, but i still struggle with the functionality of displaying and choosing icons in the form.
Any clues to how i can do this is very appreciated! :_)

you need to pre-populate your table via script (rake task) which uploads these images to your storage like s3 etc. what you can do is write the file names with relative path ( to make your job easy) in a file and read that file to access these images from your rake task and call the same apis to upload one image at a time. Once you have the reference store as a record in the table/model (ex: design) you should iterate over each record on the view to display the preview of each image. From there it’s only a matter of capturing user clicks(to know which image they have selected) or use some js libraries which can do the job. Hope this will give you some direction. Let me know if you need to discuss further.

Related

Is there a way to save and retrieve text from contenteditable data box in a specific file ? (All client side)

I'm making statistical reports for customers and I chose HTML solution as report template.
I have this issue where I want a user to be able to edit a text box of a html document and save it (as soon as he leave the area or when clicking save button) to annotate things like graphics for instance.
The content should be printed each time he opens back the .html file. Also, there are potentially multiple html pages inside the report (one editable box per sub html pages is enough)
Moreover, a big constraint here is that this html file is open locally and should be shared across users (I have to stick with this all-client side solution for now but I'm planning on doing it server side).
As you may have understood already I can't use localStorage solution as it is system/user dependant and data won't stick if people are sharing the report.
I'd rather go with a solution where it is possible to save it in a $UID.txt file for instance (one $UID for each sub pages people wants to annotate) and retrieve it so as long as the state of the editable content is saved at the same place in the report folder architecture, it will be opened as is by every other people when they get this edited report.
Thanks for your time !
A.
EDIT
I should have stipulated few things :
1- The report is composed of hundred of stand-alone html files. It is basic html and javascript components that are translated by a classic web browser without the need of an internet connexion or a localhost server.
2- Folder structure :
root_folder
|
|---- index.html (main page to access all sub pages)
|---- graphics
|---- graphic1.html
|---- graphic2.html
3- People need to share the report on their own and there is no user database. The only constraint is that after performing a modification on an editable content box, the text should be written somewhere in the folder structure (see 2) and retrieved automatically the next time some user (either the original editor or the next one on an other computer as long as the first editor shared the whole directory with its own edit) will open (or refresh) the html file.
I know that there are better solutions but I really have to stick with a stand-alone solution for now, hoping that there is a solution to this issue !
Thanks again for your time.
If there is no server-side component and you don't want to use the browser's (sandboxed) local storage (be that LocalStorage, IndexedDb or otherwise) then you are left with FileReader to read data and creating Blob URLs to download data.
The user experience would be something like this:
The user opens your (local) .html file
They are prompted to open the database (could be text file(s)) with a <input type="file">.
You use the FileReader api to load this file. Note: you can't use fetch or XMLHttpRequest to do this automatically.
When the user has finished entered their content, store it in a Blob object and then create a data:-link with createObjectURL. You could put that generated url in a <a href="..." download>Save</a> link.
As it would be up to your users to make sure they select the proper database file(s) and to save them under the right file name, this is not ideal. I would strongly recommend a (self-)hosted solution. That could deal with multiple concurrent users a whole lot better, too.
A server-side component doesn't have to be complex: If you start in a language you're comfortable with and use a SQLite database, you'll go very far in a less complex set-up than what you're describing.

Open custom app with a payload using a URL

If this heading is not clear, I’ll clarify. Before that I have to mention that this question is not a homework but I’m curious to make this kind of an application. But couldn’t verify whether following problem can be solved. So please help me to verify whether this is possible before I start my project.
Let’s say I have a custom developed app which select best image of the week of a weekly competition. Also users can vote and share voted images on facebook. However let’s say there are two persons called X and Y. X has already installed the app and he can vote and share images. And when it comes to Y, it has two scenarios.
1) Y also have the app installed. So when she click the URL X shared, this URL should open the installed app and should view the relevant image with details such as votes and shares.
2) Y still have not downloaded the app. So URL should bring her to App Store or Play store based on mobile platform.
Second scenario has a solution. But when it comes to first one, how can I push the payload ( details of images and content) with the link to show required details whenever app completes loading? I went through lots of articles but still couldn’t find a solution. Can someone help me?
I found a solution for my need.
It's better to call an API to get data I need using an image ID which is unique to each images. So each link of an image contains the app URL with image ID. So when app opens by an external link,Which can be captured by using Deep Link (React native Linking Library) and API call will make to the backend and get all relevant data.
This tutorial shows all relevant steps to do that.

Upload img to 3rd party and get URL

I'm working on a resume site that allows you to link a URL, but not upload it. I don't really want to have to pay for storing images on my server for a resume project, so I was hoping to create a button or link that does this...
Upload an image to a 3rd party website/server, such as imgur
Get a link from the upload
Automatically insert the link into the form field I currently have for linking to images (I think I know how to do this part)
I'm not stuck on imgur, but it's one of the only sites I know that allows users to upload photos and get URLs easily without creating an account...Anyone have any suggestions? I feel like something like this must have come up before.
PS. I'm trying to advertise myself as an entry-level MEAN stack developer, so I'm trying to keep everything on the website inside of the JavaScript libraries if possible.
Thanks!
very easy to use as temporary hosting:
img2url.site
https://pypi.org/project/Img2UrlApi/
its not a good idea to store images there for longer time,
only as "buffor" to get an url.

Free Image database, behind website

I am working on a University project.
I have developed a test harness, one of the features of the test harness is visual regression testing.
I am developing a basic website, as a means to displays these generated images programmatically.
My original idea was to use a mongodb database, however after some reading many people advise not using mongodb to store images.
I then tried to use google drive and drop box, however they do not facilitate permanent url's to the stored images. Or in the case of dropbox, these urls are random so not programmatic.
I need to find a way to store these images, programmatically store them using a nodeJS script, programmatically access them using JS.
Any ideas?
You can use Amazon S3 for saving and retrieveing images with permanent url's
http://docs.aws.amazon.com/AmazonS3/latest/dev/Welcome.html

File upload plugin and display for a web site application

I have a website that uses twitter bootstrap and I would like to add a place for "shared files" (word docs, videos, etc) that each user who uses the application can upload their own files to and it can be shared among users of the entire website. Everyone can view each file. The first thing that came to mind is a youtube account, where you can upload a video and then see all of your uploaded videos and everyone else can view it. I need this, but for all types of files and any user of the application can edit it.
By myself, I'm not sure how to achieve this, so I was searching for a plugin. Obviously I'm not sure if something like this has a particular name so all of my google searches have so far come up empty. Does anyone have any suggestions? Does the functionality I want have a name?
Thanks!
Dropbox.com comes to mind.
They have an API chooser where users can upload through the web site:
https://www.dropbox.com/developers/dropins/chooser/js
How to share files and folders
https://www.dropbox.com/help/274/en
Look through their Sharing Q&A
https://www.dropbox.com/help/category/Sharing

Categories

Resources