Add: v2/media uploader

app/img/picture.svg

@@ -0,0 +1,2 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

app/js/post/img.js

@@ -86,7 +86,7 @@ function handleFileUpload(files, obj, no) {
 }
 
 //ファイルアップロード
-function media(b64, type, no, stamped) {
+async function media(b64, type, no, stamped) {
 	var acct_id = $('#post-acct-sel').val()
 	var domain = localStorage.getItem('domain_' + acct_id)
 	var user = localStorage.getItem('user_' + acct_id)
@@ -130,12 +130,36 @@ function media(b64, type, no, stamped) {
 		httpreq.send(fd)
 	} else {
 		var previewer = 'preview_url'
-		var start = 'https://' + domain + '/api/v1/media'
+		//v2/media
-		httpreq.open('POST', start, true)
+		try {
-		httpreq.upload.addEventListener('progress', progshow, false)
+			var id = await v2MediaUpload(domain, at, fd)
-		httpreq.responseType = 'json'
+			var mediav = $('#media').val()
-		httpreq.setRequestHeader('Authorization', 'Bearer ' + at)
+			var regExp = new RegExp('tmp_' + r, 'g')
-		httpreq.send(fd)
+			mediav = mediav.replace(regExp, id)
+			$('#media').val(mediav)
+			var html = `<img src="../../img/picture.svg" class="preview-img pointer unknown" data-media="${id}" oncontextmenu="deleteImage('${id}')" onclick="altImage('${acct_id}','${id}')" title="${lang.lang_postimg_delete}">`
+			$('#preview').append(html)
+			todc()
+			if (localStorage.getItem('nsfw_' + acct_id)) {
+				$('#nsfw').addClass('yellow-text')
+				$('#nsfw').html('visibility')
+				$('#nsfw').addClass('nsfw-avail')
+			}
+			$('.toot-btn-group').prop('disabled', false)
+			$('select').formSelect()
+			$('#mec').text(lang.lang_there)
+			M.toast({ html: '<span>' + lang.lang_postimg_sync + '</span><button class="btn-flat toast-action" onclick="syncDetail()">Click</button>', displayLength: 3000 })
+			$('#imgup').text('')
+			$('#imgsel').show()
+			localStorage.removeItem('image')
+		} catch {
+			var start = 'https://' + domain + '/api/v1/media'
+			httpreq.open('POST', start, true)
+			httpreq.upload.addEventListener('progress', progshow, false)
+			httpreq.responseType = 'json'
+			httpreq.setRequestHeader('Authorization', 'Bearer ' + at)
+			httpreq.send(fd)
+		}
 	}
 	httpreq.onreadystatechange = function() {
 		if (httpreq.readyState === 4) {
@@ -178,19 +202,6 @@ function media(b64, type, no, stamped) {
 			if (img == 'url' && json['text_url']) {
 				$('#textarea').val($('#textarea').val() + ' ' + json['text_url'])
 			}
-			todc()
-			if (localStorage.getItem('nsfw_' + acct_id)) {
-				$('#nsfw').addClass('yellow-text')
-				$('#nsfw').html('visibility')
-				$('#nsfw').addClass('nsfw-avail')
-			}
-			$('.toot-btn-group').prop('disabled', false)
-			$('select').formSelect()
-			$('#mec').text(lang.lang_there)
-			M.toast({ html: lang.lang_postimg_aftupload, displayLength: 1000 })
-			$('#imgup').text('')
-			$('#imgsel').show()
-			localStorage.removeItem('image')
 		}
 	}
 }
@@ -275,54 +286,84 @@ function altImage(acct_id, id) {
 	var domain = localStorage.getItem('domain_' + acct_id)
 	var at = localStorage.getItem('acct_' + acct_id + '_at')
 	var start = 'https://' + domain + '/api/v1/media/' + id
+	if($('[data-media=' + id + ']').hasClass('unknown')) {
+		fetch(start, {
+			method: 'GET',
+			headers: {
+				'content-type': 'application/json',
+				Authorization: 'Bearer ' + at
+			}
+		})
+		.then(function(response) {
+			if (!response.ok) {
+				response.text().then(function(text) {
+					setLog(response.url, response.status, text)
+				})
+			}
+			return response.json()
+		})
+		.catch(function(error) {
+			todo(error)
+			setLog(start, 'JSON', error)
+			console.error(error)
+		})
+		.then(function(json) {
+			console.log(json)
+			$('[data-media=' + id + ']').removeClass('unknown')
+			if(json.preview_url) {
+				$('[data-media=' + id + ']').attr('src', json.preview_url)
+			}
+		})
+	} else {
+		Swal.fire({
+			title: lang.lang_postimg_desc,
+			text: lang.lang_postimg_leadContext,
+			input: 'text',
+			inputAttributes: {
+				autocapitalize: 'off'
+			},
+			showCancelButton: true,
+			confirmButtonText: 'Post',
+			showLoaderOnConfirm: true,
+			preConfirm: data => {
+				return fetch(start, {
+					method: 'PUT',
+					headers: {
+						'content-type': 'application/json',
+						Authorization: 'Bearer ' + at
+					},
+					body: JSON.stringify({
+						description: data
+					})
+				})
+					.then(function(response) {
+						if (!response.ok) {
+							response.text().then(function(text) {
+								setLog(response.url, response.status, text)
+							})
+						}
+						return response.json()
+					})
+					.catch(function(error) {
+						todo(error)
+						setLog(start, 'JSON', error)
+						console.error(error)
+					})
+					.then(function(json) {
+						console.log(json)
+						$('[data-media=' + id + ']').attr('title', data)
+					})
+			},
+			allowOutsideClick: () => !Swal.isLoading()
+		}).then(result => {
+			if (result.value) {
+				Swal.fire({
+					title: 'Complete'
+				})
+			}
+		})
+	}
 	
-	Swal.fire({
-		title: lang.lang_postimg_desc,
-		text: lang.lang_postimg_leadContext,
-		input: 'text',
-		inputAttributes: {
-			autocapitalize: 'off'
-		},
-		showCancelButton: true,
-		confirmButtonText: 'Post',
-		showLoaderOnConfirm: true,
-		preConfirm: data => {
-			return fetch(start, {
-				method: 'PUT',
-				headers: {
-					'content-type': 'application/json',
-					Authorization: 'Bearer ' + at
-				},
-				body: JSON.stringify({
-					description: data
-				})
-			})
-				.then(function(response) {
-					if (!response.ok) {
-						response.text().then(function(text) {
-							setLog(response.url, response.status, text)
-						})
-					}
-					return response.json()
-				})
-				.catch(function(error) {
-					todo(error)
-					setLog(start, 'JSON', error)
-					console.error(error)
-				})
-				.then(function(json) {
-					console.log(json)
-					$('[data-media=' + id + ']').attr('title', data)
-				})
-		},
-		allowOutsideClick: () => !Swal.isLoading()
-	}).then(result => {
-		if (result.value) {
-			Swal.fire({
-				title: 'Complete'
-			})
-		}
-	})
 }
 function stamp() {
 	if ($('#stamp').hasClass('stamp-avail')) {
@@ -333,3 +374,41 @@ function stamp() {
 		$('#stamp').addClass('stamp-avail')
 	}
 }
+//v2/media対応
+async function v2MediaUpload(domain, at, fd) {
+	var start = 'https://' + domain + '/api/v2/media'
+	let promise = await fetch(start, {
+		method: 'POST',
+		headers: {
+			Authorization:
+				'Bearer ' + at
+		},
+		body: fd
+	})
+	var json = await promise.json()
+	if(json.id) {
+		return json.id
+	} else {
+		return false
+	}
+}
+function alertProcessUnfinished() {
+	Swal.fire({
+		title: lang.lang_post_unfinishedMedia,
+		type: 'error',
+		showCancelButton: true,
+		confirmButtonText: lang.lang_post_retry,
+		cancelButtonText: lang.lang_no
+	}).then(result => {
+		if (result.value) {
+			post()
+		}
+	})
+}
+function syncDetail() {
+	Swal.fire({
+		title: lang.lang_post_syncDetail,
+		text: lang.lang_post_syncDetailText,
+		type: 'info'
+	})
+}

app/js/post/post.js

@@ -166,18 +166,32 @@ function post(mode, postvis) {
 		if (httpreq.readyState === 4) {
 			var json = httpreq.response
 			if (this.status !== 200) {
-				setLog(start, this.status, json)
+				if(media && this.status == 422) {
+					$('#ideKey').val('')
+					$('.toot-btn-group').prop('disabled', false)
+					alertProcessUnfinished()
+				} else {
+					setLog(start, this.status, json)
+					var box = localStorage.getItem('box')
+					if (box == 'yes' || !box) {
+						$('#textarea').blur()
+						hide()
+					}
+					$('.toot-btn-group').prop('disabled', false)
+					todc()
+					clear()
+				}
 			} else {
 				$('#ideKey').val('')
+				var box = localStorage.getItem('box')
+				if (box == 'yes' || !box) {
+					$('#textarea').blur()
+					hide()
+				}
+				$('.toot-btn-group').prop('disabled', false)
+				todc()
+				clear()
 			}
-			var box = localStorage.getItem('box')
-			if (box == 'yes' || !box) {
-				$('#textarea').blur()
-				hide()
-			}
-			$('.toot-btn-group').prop('disabled', false)
-			todc()
-			clear()
 		}
 	}
 }

app/view/make/language/en/main.json

@@ -60,6 +60,8 @@
     "lang_postimg_delete": "Click to add description, right-click to delete this",
     "lang_postimg_desc": "Description",
     "lang_postimg_leadContext": "right-click the thumbnail to delete this",
+    "lang_post_syncDetail": "Upload media synchronously",
+    "lang_post_syncDetailText": "Click each picture icon to get the thumbnail. If you can get, the media you uploaded are completely processed.",
     "lang_post_tagTL": "This toot does not contain a default tag. This toot will not be shown on Local TL. Continue?",
     "lang_post_tagVis": "This toot(not 'public' toot) is not shown on this tag's TL.",
     "lang_post_cwtitle": "Auto CW Alert",
@@ -67,6 +69,8 @@
     "lang_post_btn1": "Cancel (will not post)",
     "lang_post_btn2": "Make text hidden automatically",
     "lang_post_btn3": "Continue to post",
+    "lang_post_unfinishedMedia": "The server has not finished processing your media. Retry.",
+    "lang_post_retry": "Retry",
     "lang_status_favWarn": "It will take a miunte to favourite a remote toot.",
     "lang_status_btWarn": "It will take a miunte to boost a remote toot.",
     "lang_status_follow": "Follow",

app/view/make/language/ja-KS/main.json

@@ -59,6 +59,8 @@
     "lang_postimg_delete": "クリック: 画像に説明付ける/右クリック: 削除",
     "lang_postimg_desc": "説明",
     "lang_postimg_leadContext": "画像を削除するんやったら右クリック",
+    "lang_post_syncDetail": "同期アップロード",
+    "lang_post_syncDetailText": "小さな画像をアップロードするだけの場合、投稿可能になってすぐ投稿ボタンを押しても構いませんが、重いメディアの場合はしばらく待って、画像アイコンをクリックして、プレビューが表示されることを確認してからアップロードしてください。処理が完了している場合、各画像アイコンをクリックするとプレビューを取得します。",
     "lang_post_tagTL": "デフォルトタグ無いしこのまま投稿するとローカルには表示されへんで。",
     "lang_post_tagVis": "公開範囲が「公開」以外やったら、タグTLには出えへんで。(一部インスタンスを除く)",
     "lang_post_cwtitle": "長文投稿の警告",
@@ -68,6 +70,8 @@
     "lang_post_btn3": "これはええねん(そのまま投稿)",
     "lang_status_favWarn": "お気に入り登録したんやけどインスタンスがちゃうときは時間がかかるで、知らんけど。",
     "lang_status_btWarn": "ブーストしたんやけどインスタンスがちゃうときは時間がかかるで、知らんけど。",
+    "lang_post_unfinishedMedia": "処理未了のメディアがあります。再試行してください。",
+    "lang_post_retry": "再試行",
     "lang_status_follow": "フォロー",
     "lang_status_unfollow": "フォロー解除",
     "lang_status_block": "ブロック",

app/view/make/language/ja/main.json

@@ -59,6 +59,9 @@
     "lang_postimg_failupload": "アップロードに失敗しました。",
     "lang_postimg_delete": "クリック: 画像に説明を追加/右クリック: 削除",
     "lang_postimg_desc": "説明",
+    "lang_postimg_sync": "処理は同期的に行われます。最初にご確認ください→",
+    "lang_post_syncDetail": "同期アップロード",
+    "lang_post_syncDetailText": "小さな画像をアップロードするだけの場合、投稿可能になってすぐ投稿ボタンを押しても構いませんが、重いメディアの場合はしばらく待って、画像アイコンをクリックして、プレビューが表示されることを確認してからアップロードしてください。処理が完了している場合、各画像アイコンをクリックするとプレビューを取得します。",
     "lang_postimg_leadContext": "画像を削除するためには右クリック",
     "lang_post_tagTL": "デフォルトタグが挿入されていません。このまま投稿するとローカルには表示されません。",
     "lang_post_tagVis": "公開範囲が「公開」以外だと、タグTLに表示されません。(一部インスタンスを除く)",
@@ -67,6 +70,8 @@
     "lang_post_btn1": "キャンセル(投稿しない)",
     "lang_post_btn2": "自動でCWを付ける",
     "lang_post_btn3": "そのまま投稿",
+    "lang_post_unfinishedMedia": "処理未了のメディアがあります。再試行してください。",
+    "lang_post_retry": "再試行",
     "lang_status_favWarn": "お気に入り登録しました。インスタンスが違うときは時間がかかる場合があります。",
     "lang_status_btWarn": "ブーストしました。インスタンスが違うときは時間がかかる場合があります。",
     "lang_status_follow": "フォロー",