Image uploads are so common in app development these days that almost every app is involved. From small profile pictures to big social photos. For traditional Web applications, image uploading is a trivial requirement, but it is not easy to achieve perfection.

Demand is changeable

You might think it’s a simple file upload but what else do you need? For picture upload, from the business level to involve a lot of technical points. For example, the limit of the size of the picture, the limit of the format of the picture, whether to compress the picture after uploading. Especially when you upload a large number of pictures, through how to manage so many picture resources. These are all things we need to consider in development.

The user experience

The user experience is a matter of opinion, but there are several aspects that are the same. The most important thing is the display of upload progress. In fact, in the design process of the product, users will feel anxious if there is no progress display. When he can’t sense the upload progress, the churn rate increases. Another is thumbnail preview at upload. You want to let the user know which image he has selected and whether he has selected an indescribable image, which will go a long way in promoting user recognition of the product. The last one is for the deletion and position dragging of uploaded pictures. In fact, this demand mainly depends on the specific business in user experience. If it is a background application, it is completely unnecessary. If it’s social sharing, it’s a priority.

Fault-tolerant processing

A good, robust code is as good at handling and notifying errors as the user experience. Imagine how a user feels when there is no prompt for a question.

Error handling includes images that are too large, images that are incorrectly formatted, and the number of uploads that are out of limit. Errors on the server side should also be given corresponding prompts, so as to be a complete picture upload component.

Support concurrent

This isn’t really a part of uploading images, but it’s worth mentioning. In traditional Web applications, images are uploaded to the server for direct storage. In this case, if the upload volume is large, the bandwidth of the server and disk becomes a bottleneck. In this case, SSD and other bandwidth may be increased. But in the cloud era, maybe cloud storage is a better choice. Traditional architectures are all first to the server and then from the server to the cloud storage, so the bottleneck is still in the server. In fact, we can directly transfer to the cloud storage, the pressure to professional people to do, we can focus on the business.

For a simple picture upload actually there are a lot of knowledge in the inside, some days ago I spent some time to open source a such Laravel component, support direct upload pictures to the third party cloud storage, very convenient to use, welcome Star.

https://github.com/wh469012917/laravel-uploader