質問編集履歴

2

質問内容をアップデート

2019/10/04 04:16

投稿

chef
chef

スコア15

test CHANGED
@@ -1 +1 @@
1
- iPhoneで画像アップロド後、Ajax送信失敗する
1
+ wp_ajax_upload_attachmentアクション匿名ユザー使う方法について
test CHANGED
@@ -10,178 +10,10 @@
10
10
 
11
11
  CMSはWordPress、サイトからAjaxでPost通信して画像をメディアライブラリに格納する仕様です。
12
12
 
13
- パソコンでは成功する(問題なく動作するのですが、ちのiPhoneで動作確認しところ上手く機能せずに困っていま
13
+ 以下サイトを参考に構築し、上手く動作するようになったのですが、ログインユーザーだけがメディアアップロードする権限をいる匿名ユーザー(ログインしていないユーザー)が投稿できせん
14
+
15
+ 匿名ユーザーも投稿できるようにするにはどうすればいいでしょうか?
14
16
 
15
17
 
16
18
 
17
- ## コード
18
-
19
-
20
-
21
- ```HTML
22
-
23
- <!-- その他のコード -->
24
-
25
- <script>
26
-
27
- /* <![CDATA[ */
28
-
29
- var upload_image_ajax = {"upload_url":"http://localhost/dev/wp-admin/async-upload.php","ajax_url":"http://localhost/dev/wp-admin/admin-ajax.php","nonce":"123456789"};
30
-
31
- /* ]]> */
32
-
33
- </script>
34
-
35
- <div id="form">
36
-
37
- <input type="file" name="async-upload" id="set_image_file" accept="image/*">
38
-
39
- <button id="submit">投稿</button>
40
-
41
- <div>
42
-
43
- ```
44
-
45
-
46
-
47
- ```typescript
48
-
49
- import $ = require('jquery');
50
-
51
-
52
-
53
- $(() => {
54
-
55
- let form: HTMLFormElement | null = document.getElementById('form');
56
-
57
- if (form === null) {
58
-
59
- return;
60
-
61
- }
62
-
63
- $(form).on('click', 'button#submit', function (e) {
64
-
65
-
66
-
67
- e.preventDefault();
68
-
69
-
70
-
71
- // Get Input Type File
72
-
73
- const imageElm: HTMLInputElement | null = form.querySelector('input#set_image_file');
74
-
75
- let image: File | null = null;
76
-
77
-
78
-
79
- // Check Image
80
-
81
- if (imageElm !== null) {
82
-
83
- const fileList = imageElm.files;
84
-
85
- if (fileList !== null && fileList.length !== 0) {
86
-
87
- image = fileList[0];
88
-
89
- }
90
-
91
- }
92
-
93
-
94
-
95
- // Post Event
96
-
97
- if (image !== null) {
98
-
99
- // Create Form Data
100
-
101
- const formData = new FormData();
102
-
103
- formData.append('action', 'upload-attachment');
104
-
105
- formData.append('async-upload', image);
106
-
107
- formData.append('name', image.name);
108
-
109
- formData.append('_wpnonce', upload_image_ajax.nonce);
110
-
111
- // Post Image with Review
112
-
113
- $.ajax({
114
-
115
- url: upload_image_ajax.upload_url,
116
-
117
- data: formData,
118
-
119
- processData: false,
120
-
121
- contentType: false,
122
-
123
- dataType: 'json',
124
-
125
- type: 'post',
126
-
127
- }).then(
128
-
129
- (resp: { data: { url: string | null; }; }) => {
130
-
131
- // Success
132
-
133
- alert('画像をアップロードしました。');
134
-
135
- },
136
-
137
- () => {
138
-
139
- // Error
140
-
141
- alert('画像をアップロードできませんでした。');
142
-
143
- }
144
-
145
- );
146
-
147
- }
148
-
149
- });
150
-
151
- });
152
-
153
- ```
154
-
155
-
156
-
157
- ### 補足
158
-
159
-
160
-
161
- 後述する参考サイトの通り、WordPress側にメディア用のAjaxアクションがあるため、PHP部分はありません。
162
-
163
-
164
-
165
- ## 参考サイト
166
-
167
-
168
-
169
- https://www.webprofessional.jp/enabling-ajax-file-uploads-in-your-wordpress-plugin/
19
+ [https://www.webprofessional.jp/enabling-ajax-file-uploads-in-your-wordpress-plugin/](https://www.webprofessional.jp/enabling-ajax-file-uploads-in-your-wordpress-plugin/)
170
-
171
-
172
-
173
- ## 確認したエラー
174
-
175
-
176
-
177
- 関係あるかどうかありませんが、formDataにappendしたimageをconsoleで確認したところ、以下のようなエラーが発生していました。
178
-
179
-
180
-
181
- ![イメージ説明](ee4969673ce55fdd31d62e622209587d.png)
182
-
183
-
184
-
185
- 以上、お知恵をお借りできれば幸いです。
186
-
187
- よろしくお願いいたします。

1

軽度な修正

2019/10/04 04:16

投稿

chef
chef

スコア15

test CHANGED
File without changes
test CHANGED
@@ -52,7 +52,7 @@
52
52
 
53
53
  $(() => {
54
54
 
55
- const form: HTMLFormElement | null = document.getElementById('form');
55
+ let form: HTMLFormElement | null = document.getElementById('form');
56
56
 
57
57
  if (form === null) {
58
58