未加星标

Uploading Image using dropzone.js and Laravel5

字体大小 | |
[开发(php) 所属分类 开发(php) | 发布者 店小二04 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

User experience is one of the most important thing when it comes to building websites, creating traditional file upload is relatively easy in Laravel but it requires page to be posted which fails to provide good user experience in my opinion, using AJAX to upload images is much more practical and less frustrating for users, for example if you are building user profile page, you have to provide option to upload image along other options such as adding or modifying email, name and so on, you get the idea, It would be great place to use AJAX based image upload and keep image upload process separate from rest of the form.

Building your own AJAX implementation for the uploading image might take a lot of time and you have to maintain the code yourself, there are quite a few javascript libraries to handle image upload but let's focus on dropzone.js. It is a great library to upload images, it also gives you functionalities such as drag and drop, image manipulation, and does not require any change of code in the backend(Laravel 5), if your code is working on traditional file upload, it's probably going to work with dropzone.js as well, let's see how to create small image upload app using dropzone.js and Laravel.

Prerequisites We will be using blade form syntax which requires HTML package which is not included in Laravel5 by default, you can see how to installHTML package here. We will be using CDN for dopzone.js, you can go to dropzone official site for complete documentation. We assume you have some knowledge of file uploading in Laravel, check out ourimage upload andfile upload tutorials to get the hang of it. What we are going to build

We are going to build asimple app where we can drag and drop image we want to upload or click the selected area to upload an image with the help of dropzone.js and Laravel5 as backend.


Uploading Image using dropzone.js and Laravel5
Directory Structure

We will have simple Laravel 5.1 directory structure and file we are going to work with is mentioned in the structure.

laravelroot
| app
| | Http
| | | Controllers
| | | | ImageController.php
| | routes.php
| | |
| config
| | app.php
| | filesystems.php
| public
| | Images
| | js
| | | upload.js
| | styles
| | | main.css
| | |
| resources
| | view
| | | image
| | | | create.blade.php
| Composer.json Configuring filesystems.php

We are going to use Laravel Filesystem class , we can edit config/filesystems.php file and configure where we want to save our image, API provided by Filesystem class allows us to upload files locally or on the cloud,In this case, e are going to use local storage, if you want to upload files to the cloud, you can do it with very littile configuration, tuploading files to the cloud, check out our Dropbox file upload tutorial .

Open filesystems.php and add new disk in disks Array.

<php
return [
'disks' => [
'image' => ['driver' => 'local','root' => public_path().'/images'
],
],
]; Setting up Required Routes

This is very simple application, so we only need two routes, one for showing uploading page and other route will handle the task of uploading image.

<?php
Route::get('/upload', ['as' => 'image.create', 'uses' => [email protected] ']); Route::post('/upload', ['as' => 'image.store' , 'uses' => [emailprotected]

']);

Creating controller to handle Image upload

We are going to create ImageController which two methods( create, store), create method will show to page to upload image and store method has logic to save the image.

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use Carbon\Carbon;
use App\Http\Controllers\Controller;
use Illuminate\Contracts\Filesystem\Factory as Storage;
use Illuminate\Filesystem\Filesystem;
class ImageController extends Controller {
/**
* @return \Illuminate\View\View
*/
public function create()
{
return view( 'image.create' );
}
/**
* @param Storage $storage
* @param Request $request
* @return \Illuminate\Http\RedirectResponse|string
*/
public function store( Storage $storage, Request $request )
{
if ( $request->isXmlHttpRequest() )
{$image = $request->file( 'image' );$timestamp = $this->getFormattedTimestamp();$savedImageName = $this->getSavedImageName( $timestamp, $image );$imageUploaded = $this->uploadImage( $image, $savedImageName, $storage );if ( $imageUploaded ){ $data = [ 'original_path' => asset( '/images/' . $savedImageName ) ]; return json_encode( $data, JSON_UNESCAPED_SLASHES );}return "uploading failed";
}
}
/**
* @param $image
* @param $imageFullName
* @param $storage
* @return mixed
* @throws \Illuminate\Contracts\Filesystem\FileNotFoundException
*/
public function uploadImage( $image, $imageFullName, $storage )
{
$filesystem = new Filesystem;
return $storage->disk( 'image' )->put( $imageFullName, $filesystem->get( $image ) );
}
/**
* @return string
*/
protected function getFormattedTimestamp()
{
return str_replace( [' ', ':'], '-', Carbon::now()->toDateTimeString() );
}
/**
* @param $timestamp
* @param $image
* @return string
*/
protected function getSavedImageName( $timestamp, $image )
{
return $timestamp . '-' . $image->getClientOriginalName();
}
}

Note:For the sake of simplicity we are adding uploading logic in controller, and also creating some helper functions in the controller, you should create a separate class or repository to handle image uploading logic.

To keep our image name unique, we are prefixing timestamp with image name, for this we are using Carbon class, as you can see we are importing c arbon namespace, We are also using Filesytem and Factory class so let's import them too.

Creating View to upload Image

We have only one view, so keep things simple, we are not going to create master page and whole markup will be on the view.

We are going to need bootstrap , jquery and dropzone libraries so let's get them using CDN .

We are also going to write some JavaScript and CSS, to keep our code less muddy let's create sperate files for scripts( /public/js/upload.js ) and styles( /public/styles/main.css ).

In this view we will create a simple form with only one input (which is file type), when we drop image file to that input, it will post file to the route 'image.store' and store method on Image controller will handle the image and save to public/images folder.

resources/view/Image/create.blade.php <!doctype html>
<html lang=

本文开发(php)相关术语:php代码审计工具 php开发工程师 移动开发者大会 移动互联网开发 web开发工程师 软件开发流程 软件开发工程师

主题: LaravelHTMLCDNJavaScriptCSSJava
分页:12
转载请注明
本文标题:Uploading Image using dropzone.js and Laravel5
本站链接:http://www.codesec.net/view/484682.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 开发(php) | 评论(0) | 阅读(25)