laravelでajaxを使ってパーツを追加する

Question

現在、複数の画像をアップロードする前にサムネイルを表示するようなものを作成しておりますがうまくいっておらず、
お力を貸して頂けないかと質問させていただきました。

●やりたいことの一連の流れ
1.まとめてアップロードと言うdivで作られた欄に画像をドラッグ＆ドロップで放り込む
2.画像サムネイルとタイトルを入力する欄のパーツがhtmlに追加される

●できていない、わからない部分
1.ajaxでパーツのhtmlを取得し、htmlとしてajaxへ返す

以下が現在のソースの一部になります。

ルーティングの設定

Route::get('/parts', '\PartsController@getParts');
Route::post('/setImage', '\Ajax\AjaxController@setImage');

画像を投入した際のjquery

$("#uploadImage").on("drop",function(e){
    e.preventDefault();
    for(var i = 0;i<e.originalEvent.dataTransfer.files.length ;i++){
        var fileReader = new FileReader();
        var loadedImageUri = "";
        fileReader.onload = function( event ) {
            loadedImageUri = event.target.result;
        };
        $.ajax({
            url: "/setImage",
            type: "POST",
            data: fd,
            processData: false,
            dataType: 'html',
        }).done(function(data){
            $(data).find('#thumbnail').append('<img src="'+loadedImageUri+'">');
            alert("success!");
        })
        .fail(function(data){
            alert("error!");
        });
    }
});

base.blade.php

<div id="uploadImage">
    登録する画像をドラッグ＆ドロップしてください
</div>
<div name="thumbnailList">
    ここにパーツが追加される
</div>

PartsController.php

public function setImage(Request $request) {
    return view('add-photo');
}

add-photo.blade.php（追加するパーツのblade）

<div id="thumbnail">
    <input type="text" value="">
    ここに画像のサムネイルが追加される
</div>

よろしくお願いいたします。

Answer 1

設計が思いつかないから教えて欲しいという質問でいいんだろうか？
setImageで
0. 画像を受け取る
0. 画像をpublicディレクトリに配置する
0. 配置した画像のパスをajaxのレスポンスとして返す
0. ↑で取得したパスを使ってサムネイル用のimgタグをjsで書き足す

Comments

[siki]

失意礼しました、記載が足りておりませんでした。
上記の段階ではまだ画像は保存せずサムネイルをURLスキームで表示するだけにしたいのです。

[hentaiman]

ajaxで画像をbase64に変換したものを返せばimgタグで直接表示出来ますよ
それともサーバーに書き込むという動作自体を一切したくないんですか？

[mikkame]

> ajaxで画像をbase64に変換したものを返せば

jsで変換できるし、ajaxで送る必要ないんじゃないかと・・・

[hentaiman]

まあ自分ならどうするかで回答しただけなので・・・

Answer 2

アップロードする前に、確認のためブラウザで画像を表示するには、Laravelにアップしてしまうと後で削除などが手間なので、File APIを使えばフロントエンド側で対応可能です。

File - Web API | MDN
フォームからファイルを選択した際に、submitする前にプレビュー表示する方法(jQuery版)