asp.net ajax upload でエラーになる

Question

下記のコードでhtmlから画像をアップロードしたいのですが、
開発環境　windows10 + visualstudio comminity 2017でだと正常にアップロードでき
本番環境　windows2012 r2 iis(8.5.9600.16384)だとエラーになってしまいます。

ディレクトリ自体の権限はIISuserがフルアクセスできるように設定済です。
JSでのエラーでは「失敗object object」 となってしまい、どこでエラーになっているかがわかりません

なにか考えられる方法、エラーの内容を受け取る方法を教授頂きたいです
よろしくお願いいたします

//アップロード
function upload() {
  var data = new FormData();
  var fileUpload = $("#FileUpload1").get(0);
  var files = fileUpload.files;
  for (var i = 0; i < files.length; i++) {
    data.append('photo', upload_blob, files[i].name);
  }
  //ディレクトリパス追加
  data.append('dir', 'upload');
  var now = new Date();
  var strfilename = "" + now.getFullYear() + padZero(now.getMonth() + 1) + padZero(now.getDate()) + padZero(now.getHours()) + padZero(now.getMinutes()) + padZero(now.getSeconds());
  //年月日時分秒の文字列の作成(YYYYMMDDHHMMSS)これがファイル名に
  data.append('comment', strfilename);
  alert("Filename" + strfilename);
  var options = {};
  options.url = "FileUploadHandler.ashx";
  options.type = "POST";
  options.data = data;
  options.contentType = false;
  options.processData = false;
  options.success = function (result) {
    //アップロード完了
    alert("成功" + result);
  };
  options.error = function (err) {
    //アップロード失敗
    alert("失敗" + err);
  };
  event.preventDefault();
  $.ajax(options);
}

<%@ WebHandler Language="C#" Class="FileUploadHandler" %>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Configuration;
using System.Diagnostics;
using System.IO;
using System.Text.RegularExpressions;

public class FileUploadHandler : IHttpHandler
{
    
    public void ProcessRequest(HttpContext context)
    {

        try
        {
            

            if (context.Request.Form["dir"] != "")
            {

                if (context.Request.Files.Count > 0)
                {
                    HttpFileCollection files = context.Request.Files;

                    for (int i = 0; i < 1; i++)
                    {
                        HttpPostedFile file = files[i];

                        string txtcomment = context.Request.Form["comment"];
                        string fname = txtcomment + ".jpg";
                        string fnamepath = context.Server.MapPath("uploads/" + fname);
                        file.SaveAs(fnamepath);
                            
                    }

                }

                context.Response.ContentType = "text/plain";
                context.Response.Write("Successfully!");

            }
        }
        catch (Exception e)
        {
            context.Response.Write("Failure!" + e.ToString());
        }




    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

web.configの情報も追記します
文字制限のため、こちらにアップしました。

web.config

Fiddlerのキャプチャ

テストコードをアップ
テストコード

Comments

[m.ts10806]

alert()ではオブジェクト内部は展開されないのでconsole.log()にてブラウザ委開発ツールより内容確認して質問に追記してください

[m.ts10806]

それかメッセージだけ欲しければ
err.messageですね。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Error

[Qoo]

ありがとうございます！
スマホでconsole.log()確認する方法がわからなかったので、PCでテストしたところ問題なくアップロードできました（泣）

アップロードする画像サイズの問題なのでしょうか。。。

アップロードできたファイルは7.5kb
アップロードできなかったファイルはスマホで撮影した画像662kb

でした。

一応asp.net のweb.confgで最大アップロード容量は設定しているつもりなのですが、、
効いてないのでしょうか。。。

<system.webServer>
<handlers>
<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<remove name="OPTIONSVerbHandler" />
<remove name="TRACEVerbHandler" />
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>
<modules runAllManagedModulesForAllRequests="true" />
<security>
<requestFiltering>
<requestLimits maxAllowedContentLength="1000000000" />
</requestFiltering>
</security>
</system.webServer>

Answer 1

コメント欄では画像が貼れないので回答欄に書きます。

IIS Express では問題なくて IIS ではダメと言うことですと、まず頭に浮かぶのは context.Server.MapPath("uploads/" + fname);　で取得できるフォルダに対する IIS のワーカープロセスのアクセス権なのですが、そこは問題ないのですか？

IIS のワーカープロセスの属するグループは IIS_IUSRS です。それに書き込み権限を与えればアップロードされたファイルをそこに書き込むことはできるはずです。

FIddler を使って要求・応答をキャプチャして、応答の WebView か TextView を見てください。以下の画像のようなエラー情報が取れているかもしれません。

上の画像は以下の記事のように jQuery.ajax を使って画像をアップロードした時、Controller で疑似的に例外をスローしたものです。

MVC でファイルのアップロード
http://surferonwww.info/BlogEngine/post/2019/08/03/file-upload-on-aspnet-mvc-application.aspx

上の記事のコードの .fail(function( jqXHR, textStatus, errorThrown ) で表示されるのは textStatus: error, errorThrown: Internal Server Error ぐらいで詳しい情報は分かりませんが、debug を有効にしてあれば上のような情報がコンテンツに含まれて返ってきます。

ちなみに、Controller で疑似的に例外をスローというのは以下のようにしています。

【追記】

質問者さんが下のコメント欄に書いた url の https://usign.shop/test.html を、自分の環境で試して Fiddler で要求・応答をキャプチャしたの画像を以下に貼っておきます。ブラウザは Chrome 78.0.3904.87 です。

＃77 がサイズ 206 KB (211,951 バイト) の .jpg 画像で応答は HTTP/1.1 413 Request Entity Too Large となり失敗。

＃85 がサイズ 41.8 KB (42,856 バイト)の .jpg 画像で応答は HTTP/1.1 200 OK となり成功。

【追記２】

SSL だけでそういう問題が出るとすると FAQ レベルの話＆周知の事例なのに、そうでもなさそうなのが不思議だったのですが、client certificate も絡んだ問題なのかもしれません。

以下の記事の回答で黄色のバックグラウンドとなっている部分が IIS Express を使った時のエラーメッセージのようです。

IIS randomly returns 413 Request Entity Too Large when uploading large files and using TLS
https://serverfault.com/questions/900211/iis-randomly-returns-413-request-entity-too-large-when-uploading-large-files-and

その中に：

Most likely causes: The Web server cannot service the request because it is trying to negotiate a client certificate but the request entity is too large.

If using client certificates, try: Increasing system.webServer/serverRuntime@uploadReadAheadSize

・・・とあります。

実際、質問者さんのサイトは client certificate を要求しているようです。以下の画像は Fiddler 経由でアクセスしているときに表示されたものです。そう書いてありますね。

ちなみに、自分の環境の Visual Studio Community 2015 で IIS Express で SSL 通信を利用する設定にして（設定方法は下記参照）試してみましたが、uploadReadAheadSize はデフォルトのままで問題なしでした。

IIS Express で SSL 通信
http://surferonwww.info/BlogEngine/post/2018/09/09/ssl-communication-on-iis-express.aspx

Comments

[Qoo]

回答ありがとうございます。
IIS_IUSRSは問題なく設定されており、容量の小さい画像サイズですとアップすることができました。
なので権限の問題ではなさそうです。

現在容量の問題や設定について調べているところです。
念の為、web.configの情報をアップさせて頂きました。

[退会済みユーザー]

Fiddler で調べてみましたか？

[Qoo]

すみません、Fiddlerの使い方がいまいちわからずまだやっていません。

[退会済みユーザー]

やってください。使い方は難しくなく、インストールして立ち上げて、ブラウザでアクセスすれば自動的にキャプチャされます。

Web.config には httpRuntime maxRequestLength="1024000" と requestLimits maxAllowedContentLength="1048576000" の 2 ヶ所でちゃんと設定されてますが、それを超えるような巨大なファイルなのですか？

あと、今回のケースでは関係ないと思いますが、JSON の場合は先に紹介した記事に書いたように、クライアントからサーバーへ送信できる JSON 文字列の長さは、デフォルトで 102,400 文字に制限されています。

[Qoo]

Fiddlerを使って試してみたのですが、左側のビューにはエラーなどは出ませんでした。
追加情報としてキャプチャをとりましたが、
webviewは文字化けしてしまっています。

現在は下記同じ値を設定しています。
httpRuntime maxRequestLength="1048576000"
requestLimits maxAllowedContentLength="1048576000"

また、念の為、IIS上の要求フィルター→許可されたコンテンツの最大長にも同じ値を設定しました。
アップロードは

７．５ｋｂ　→　成功します
１９１ｋｂ　→　失敗します
１．２１ｍｂ→　失敗します

[退会済みユーザー]

> 追加情報としてキャプチャをとりましたが、webviewは文字化けしてしまっています。

それ、違うものを見ています。POST してるはずなのに何故 GET?

[退会済みユーザー]

> 現在は下記同じ値を設定しています。

同じではなくて単位が違うはずです。

[Qoo]

すみません、POSTやGETはどこで切り替えるのでしょうか？？

[退会済みユーザー]

options.type = "POST"; なので POST になるはずです。他にやることがあるので、すみませんが、今日はここまでにさせてください。

[Qoo]

お付き合いありがとうございます。
いろいろ試してみます

[退会済みユーザー]

一つだけ追記。複数のファイルを同時にアップロードしていると以下の記事のような対処が必要だそうです。（でも、違いますよね？）

1リクエストで大量のファイルをアップロード出来ない問題を解決するのが大変だった話
https://qiita.com/maitake9116/items/3e598966e3bcea2b20cd

[退会済みユーザー]

あ、options.type = "POST";　は違いますね。type でなく method のはず。でも小さいファイルは問題なかったというのが不可解ですが、そのあたり良く調べてください。今日はホントにここまでにします。

[Qoo]

情報ありがとうございます。
ファイルは一つですが、
この辺りも含めて今晩トライしてみます。
また結果報告させて頂きます。

[退会済みユーザー]

type は method の別名で、type に POST を指定すれば OK でした。上のレスで混乱させたらすみません。(ちなみに、method は v1.9 以降で追加されたそうです)

[Qoo]

おはようございます。まだFIddlerの使い方がわかっていません。
＞options.type = "POST";　は違いますね。type でなく method というのはFIddlerのことでしょうか
これをどの画面で指定すればよいのか教えて頂けないでしょうか。
FIddlerでrequest headersでPOSTのものを探しても見当たません。。

URLScanに関してはURLScanツールもインストールしておらず、URLScan.iniも存在していませんでした。

また、いろいろとデータをアップロードしている中で
PCからであれば２．８ｍｂのデータもアップロードできました。

７．５ｋｂ　→　成功します
１９１ｋｂ　→　失敗します
１．２１ｍｂ→　失敗します
２．８ｍｂ→　windows + chrome成功、iPhone safari 失敗

何が悪いのか検討もつきません。
SSLなどで影響されるようなことってないですよね・・

念の為ｍ追記情報に現在のソースコードまるごとアップロードしてみました。

可能な範囲で教授いただければ助かります。。

[退会済みユーザー]

> まだFIddlerの使い方がわかっていません。

それができないと先に進めません。先にも「使い方は難しくなく、インストールして立ち上げて、ブラウザでアクセスすれば自動的にキャプチャされます。」と書きましたが読んでもらっているでしょうか？

それから、type, method の件も上に書きましたが「type は method の別名で、type に POST を指定すれば OK でした。」です。

[Qoo]

指定するとはどこで指定するのでしょうか。
fidder上のどの画面で指定できるのででしょうか。

基本的な部分で申し訳ないですがよろしくお願い致します

[退会済みユーザー]

GET, POST は Fiddler の設定ではなくて、jQuery.ajax の設定の話です。質問者さんの JavaScript のコードで options.type = "POST"; と書いてあるじゃないですか。

最初に質問者さんが貼った Fiddler の画像に GET とあったのをおぼえてますか？　 jQuery.ajax で options.type = "POST"; と設定すると、そこは GET ではなく POST になるので違うものを見ていると言ったのです。

[Qoo]

あ、すみません、そういう事だったのですね…ずっとfiddlerばかり探してました、やってみます

[Qoo]

何度もすみません、
現在、コードはoptions.type = "POSTになっているので変更はしなくて良いですがよね？

FIddlerでrequest headersでPOSTのものを探しても見当たらないのですが
見るところはリスト一覧をダブルクリックして表示されるrequest headerで確認するという手順で良いでしょうか

[退会済みユーザー]

options.type = "POST" はもちろんそのままで良いです。

問題の jQuery.ajax による要求・応答を Fiddler でキャプチャするには、ブラウザを立ち上げて、質問者さんの JavaScript のメソッド function upload() { ... } があるページを表示し、そのメソッドを動かす操作をしないとダメなんですが、やってますか？

[Qoo]

はい、fiddlerを起動したあと、
webページを表示し、実際にアップロードまで行っているのですが、postのデータがありません。
もしかして、postまで出来ていない？
ということなのでしょうか…

アップロードできないファイルばかりキャプチャしていたので、アップロードできるファイルでも試してみます！

これでキャプチャできればjs側の問題の可能性が高いということですかね？

[退会済みユーザー]

質問者さんの使っているブラウザのプロキシの設定の問題で全く何もキャプチャできてないのでは？　例えば、ここ Teratail でも何でもいいですがどこかにアクセスして Fiddler に要求・応答がキャプチャされますか？

[Qoo]

Fiddlerを起動してテラテイルのページを表示すると左側のリストにはずらずらと要求、応答が表示されていきます。

[Qoo]

ちなみにすごく初歩的なことかもしれないのですが、
今回はVisualStudioでASP.net webアプリケーションを作成したわけではなく
個別で作成したhtmlページ、FileUploadHandler.ashx、web.configを
IISマネージャーを作成したディレクトリに投入して利用しています。

アップロードできるファイルもあるので動作はしていると思うのですが
少し気になったので追記させていただきました。

[Qoo]

進捗です。
VisualStudioでASP.net webアプリケーションとして作り直し、
iisの設定も一旦削除した後、新しく作り直すことでPCからのアップロードはうまくいくようになりました。

試したのはwindows10+chrome、Mac+safariで
それぞれ、１５キロ、２．８メガ、１５メガ、３５メガの画像データのアップロードはできました。

しかしながらiPhoneブラウザだと１５キロはOKでそれ以外は失敗してしまいます。

[退会済みユーザー]

> PCからのアップロードはうまくいくようになりました。

何が問題だったのでしょう？　Fiddler でキャプチャできてなかったとすると、jQuery.ajax の要求が出ていなかったのですか？　html ページということですが、古いページがブラウザのキャッシュに残っていたとか？

[退会済みユーザー]

Fiddler でキャプチャできるようにはなったのでしょうか？

[Qoo]

いろいろと試行錯誤していますが、やはりサイズの問題ではなさそうです。
PCからはうまくいくと書きましたが、同じサイズでもアップロードできるものとできないものがあります。
なのでPCからうまくいくというのも勘違いということになります。PCでうまくいっても同じ画像をiPhoneにうつしてアップロードすると失敗します。

PC,iPhoneともキャッシュはクリアしてからテストしているつもりなので
ここの問題ではないと思います。

jQuery.ajax の要求が出ていなかったとするとerrorには入ってこないかと思ったのですが、、
options.error = function (err) {
//アップロード失敗
alert("失敗" + err);
};

要求が出ているかどうかを判断する方法などはなにか考えられますでしょうか。

[退会済みユーザー]

もう一回聞きますが、Fiddler でキャプチャできるようにはなったのでしょうか？

[Qoo]

Fiddlerを本番環境のwindowsサーバにインストールして確認もしてみたのですが
やはり結果は同じで、request headersでPOSTになっているデータがないのです。。
ちなみに今テストしているURLが下記なのですがそちらでも同じ結果なのか見て頂くことはできないでしょうか。。

お忙しい中、いろいろアドバイス頂き本当に申し訳ないです。。

[退会済みユーザー]

こちらではその URL にアクセスして「くまもん」の画像をクリックして画像を選択すると Fiddler で要求・応答をキャプチャできます。

やはりサイズが問題のようで、ダメな場合は HTTP/1.1 413 Request Entity Too Large 応答が返ってきて、Fiddler の応答の WebView には "The page was not displayed because the request entity is too large." と表示されます。

後で回答欄に画像を貼っておきます。

[Qoo]

そうなんですね！それがわかっただけでも嬉しいです！ありがとうございます！
Fiddlerがきちんとキャプチャできるようにしてみます！
しかしながらサイズ制限がかかってしまっている問題が謎です。。

[Qoo]

このような情報見つけました。ただIIS8.5なので規定のWEBサイトや設定エディタの選択が見当たりません。。調べてみます。。

https://codeday.me/jp/qa/20190317/378412.html

[退会済みユーザー]

要求ヘッダの Content-Length: 77141 が変ですね。211,951 バイトのファイルなのでそれ以上になるはずなのですが。413 というのも IIS が返しているのか怪しいし、何か当方の想像を超えた変なことになってるような気がします。

[Qoo]

画像ファイルは読み込んでいるのですが、JSの方で他の画像とともにctx.canvas.toDataURLを使用してURIデータに変換したりしているので、もともとの画像サイズからは変化するのかと思ったのですが、もしかするとこの処理でファイルが膨大になっていたりするということなのでしょうか。。

[Qoo]

試してみたところ、13ｋのファイルは31kに、4.2メガのファイルは189kbになっていました。
いずれにしてもそこまで大きなファイルにはなっていないようには思うのですが。。

[退会済みユーザー]

それを私に聞かれても分かりません。html ソースを見ると何かいろいろやっているのは分かりますが、それを解析しろと言われても・・・

お勧めするのはファイルをアップロードするのに不要な部分はどんどん削っていって、問題の原因を切り分けることです。

[退会済みユーザー]

> 試してみたところ、13ｋのファイルは31kに、4.2メガのファイルは189kbになっていました。

そこが訳が分からないところです。

そもそも 13KB のファイルを送信するのに Content-Length が 31KB と倍以上になる理由（それ以外に何か追加しているとか）があるのですか？　逆に 4.2MB のファイルを送ろうとすると Content-Length が189KB になるなんてことは普通にやったら有り得ません。

だから、上のコメントで「何か当方の想像を超えた変なことになってるような気がします。」と言ったのです。

[Qoo]

そうですね。おっしゃるとおりだと思います。また解析までして頂く必要はないです。。
ただ、サーバのサイズ制限の問題も腑に落ちないのでJS側なのかIIS側の問題なのかもまだ判別していないので頭を抱えている状況でございます。。
今からashx側にnlogを入れてサーバ側のロギングもしてみようと思います。

[退会済みユーザー]

上にも書きましたが、413 というのは IIS が返しているのか怪しいです。IIS の HTTP Status 一覧を見てもそういうのはないし、413 Request Entity Too Large でググると WCF の制限という記事もヒットするし・・・

ファイルサイズの制限以前の問題として、何故 Content-Length が元のファイルサイズより小さくなるのかも謎ですし・・・

元のコードを書いた人は他にいるのではないかと想像していますが、もしそうなら、その人に相談するのがよさそうです。

[Qoo]

WCFの制限、私も見つけました。これですよね。
https://code-examples.net/ja/q/9a76cd

元のコード書いた人が連絡がとれず。。といった状況でして。。
大変恐縮です。。

またお時間ある時で良いのですがFiddlerのキャプチャを送付いただけると嬉しいです。

[Qoo]

解決しました！（アップロードの問題が。。）
WCFの制限でapplicationHost.configに<serverRuntime uploadReadAheadSize="2147483647" />
を指定したところ、iPhoneからもPCからもアップできるようになりました！
Content-Lengthの問題は残るもののアップロードの問題は解決したと思います！
長々とお付き合い頂きありがとうございました！

fiddlerは使えるようになりたいので、勉強してみます

[退会済みユーザー]

要求を出している先は http ハンドラで、wcf ではないので wcf の制限は関係なさそうです。

ssl を使っていると 413 エラーになって UploadReadAheadSize の設定で解決できるという Microsoft の記事がありました。ssl 使ってますよね？

[Qoo]

ありがとうございます。
はい、SSLをつかっています。先月にSSL化を実施したところなので、UploadReadAheadSizeの設定が必要になったということなんですね。。同じサーバで複数ドメインを使用しており、同じくSSL化したので合わせて確認しておきたいと思います！
本当にお力添えいただきありがとうございました。

[退会済みユーザー]

SSL だけでなく client certificate も絡んだ問題なのかもしれません。そのことを回答欄に追記しておきます。