Hi I'm working with create-react-app, i've setup a file upload that allows images to be sent to the backend and saved locally (to the projects build directory). I'm able to dynamically reference images via localhost:4000/image.png so that already works (ie: i have a blog that lets me upload images that I later access via a blogList).
However i figured this probably isn't the best place to dynamically upload images to. I've read the docs on create-react-app and both the locations that mention images dont seem to work for my use case, i feel like im definitely doing something wrong but im not sure what.
docs im referring to:
Says use "import" however im loading dynamically so i cant see how this would work?
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-fonts-and-files
says use public, however wouldnt that require a rebuild? since im loading dynamically that isnt possible: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#when-to-use-the-public-folder
NOTE: i have a image uploader and backend working fine it works already using the /build directory. i can upload and dynamically reference images. I'm just looking for best practices for doing something like this. Thanks!
(if you mention "just use nginx" could you please elaborate on the implementation a little)
As a learner I struggled with this problem and tried different approaches once a while ago. For rarely used assets, using /public for client could be useful but I have an app where clients upload images and manage them. Like you, I did not like those approaches and ended up with this setup.
Create a /public directory on backend and upload images to /public/images
Serve /public directory with Express statically.
Use dynamic path variable (via a config setup) for image paths. http://localhost:backend_port/public/images for development and /public/images for production.
I don't know this is the best approach but it worked for me. Beside being best approach when I upload images before that setup CRA was refreshing (hot reloading) my app after each image upload.
Related
I am currently trying to implement a feature in a web-application that allows the user to upload an image and display it on the website.
I'm using SpringBoot with Vue 3 (TypeScript) and for production I build it into a single jar using the frontend-maven-plugin dependency.
I tried using the MvcConfigurer to expose a directory (In which I would save the uploaded images) of the server but that started to conflict with the vue-router.
A lot of the solutions I found required to image to be uploaded to the database and to my knowledge this isn't actually recommended.
I also tried using absolute paths but the images wouldn't load at all then.
Some of my friends recommended to use a cloud server but as I am doing this for school I think that's a bit overkill.
Anyone know a satisfying solution to this or has a recommendation?
I found out i can get Summoner Icon image using this url:
https://ddragon.leagueoflegends.com/cdn/11.14.1/img/profileicon/934.png
The basic form of this is:
https://ddragon.leagueoflegends.com/cdn/{version}/img/profileicon/{profileIconId}.png
i know i can get the second value of {profileIconId} through Riot API but how do i know when i should update the version value? I don't want my app to crash when the version should be changed.
You should not be referencing ddragon for displaying icons or images. In fact, DataDragon specifically requests that you download the archive (.tgz) for each patch/version and host the assets locally or on your own CDN.
Websites like op.gg do this for all of the assets and host the images on their own CDN. They have to update their CDN every patch. You can automate updating the CDN using scripts, but for most small projects the work to automate this process may not be worth it.
Generally, it is considered rude to piggyback off of someone else's CDN without explicit permission to do so. Riot goes a step further and explicitly asks that you do not do this.
If someone is using the data dragon (ddragon) cdn, you can know the latest version looking at this json that they provide:
https://ddragon.leagueoflegends.com/api/versions.json
Just take the first element of the array and you are good to go without any scripting.
I am working on a ecommerce site built on the top of Nop Commerce 2.3. We want to use CDN for loading all static contents including its images, but not sure how to do this with NopCommerce.
Nopcommerce is set to save binary of images in db at the time of inserting product, and then it generates thumb or re-sized / optimized images at the run time as and when required and stored them in the content folder of the same application for retrieving on page during load time.
Now, suppose on some page, lets say, Home Page, we have 70 product images. I want to distribute it across four host name, so each host name will serve 17/18 images.
This is definitely to save some time in image loading.
Now the Question is:
How to do it in best way in NopCommerce?
The challenges are:
Changing in nop commerce code to load images from CDN instead of its application\content folder. This is not an issue and is fine to manage.
To implement this correctly we might need some mechanism that checks for image on CDN if it doesn't exist, then we might need to transfer the image from content folder to appropriate folder at CDN maybe ? (suggest), and if it doesn't exist in content folder, then need to generate suitable image first and then transfer it.
I'm concerned about this 2nd challenge, and wants to understand the best approach to do this. Moreover, how to do this... specifically check if image exists in CDN or not?
Not very much sure, how to do this? And is it okay or do you suggest something else?
If you use the OVH CDN, you simply point your dns to the CDN dns, add the static file's extensions to the CDN configuration, and let it work for you. All other extensions will pass through. No code to change.
I am trying to create a portfolio site and am stuck finding a good approach to deal with images. I have integrated the SonataAdmin Bundle and have setup Admin classes for "Projects" and "Images". My goal is to go into a Project and add images to it and select one of these images as the Project thumbnail.
Ideally I would like to integrate an AJAX multi-uploader. I am not sure the best approach for this and am looking for any suggestions / thoughts.
I have looked at the Sonata Media Bundle, though it seems more robust than I actually need and the learning curve to customize it seems a bit steep. I have already setup an image entity (symfony2 cookbook for uploading documents) I imagine I can create a many-to-one on images and projects rather than using the MediaBundle, though I am still at a loss of how to integrate an AJAX script for this.
Thanks in advance for any advice!
Shawn
I suggest you to look at https://github.com/punkave/symfony2-file-uploader-bundle
This bundle is based on the excellent blueimp jQuery-File-Upload package and provides multiple file uploads.
Edit 28/04/14: There is now also OneupUploaderBundle which supports a variety of uploaders and seems to be under more active development.
checkout https://github.com/ruian/RuianUploadifyBundle its support multiupload but only with flash plugin.
Also this bundle is worth a shot. Not really mentioning AJAX, but seems really strong in basic uploading features. Once you get that done, you can ajaxify by yourself. I'm planning to try this bundle in few days, I may update this answer later.
So I endedup using Valumns Ajax multi uploader: http://valums.com/ajax-upload/
I tried to customize the Sonata Admin Page but this proved a bit difficult, Instead I simply created a route / controller / view specifically for uploading batch images. It seems to be working great!
I have a requirement of bulk uploading images. More precisely, I want to upload all the images for a web site (static images like back ground, logo, corner images , images required by css etc..)
As I think uploading these images one after another is not looks like quite practical (As it might have 60-70 images). So my questions are..
What is the standard way of doing these kind of a staff ?
Is it possible to let users to upload a .zip (images) file and
extract it from the server side.
If 2 is possible, can i do it with Rails3 and standard shared host
thanks in advance
cheers
sameera
1) Assuming you are talking about allowing bulk uploads from the website not as a rake task the typical way for handling multiple uploads is to use Uploadify / SWFUpload for the frontend along with a gem such as Paperclip to handle the images on the Rails side.
A google search for "paperclip uploadify" or "paperclip swfupload" should give you some good reference material.
2) It is certainly possible to do this, I've mostly worked with it the other way around to offer zipped archives of files for download but processing zips and working with the included files is definitely do-able
3) The suggested methods I gave for (1) above work just fine on Rails 3 and I can't see any reason they wouldn't work on shared hosting. That approach will however need some additional work for environments such as Heroku which have no or transient direct storage