This repository has been archived by the owner on Dec 31, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
indexnew.php
150 lines (135 loc) · 4.82 KB
/
indexnew.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<style>
// Usefull CSS from BalusC http://stackoverflow.com/a/2913366
.currencyinput
{
border: 1px inset #ccc;
}
</style>
<link href="dropzone/dropzone.css" rel="stylesheet" />
<link href="dropzone/min/basic.min.css" rel="stylesheet" />
<script src="jquery.min.js"></script>
<script src="dropzone/dropzone.js"></script>
<script>
// From official dropzone wiki: https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone cleaned up and customized
// The camelized version of the ID of the form element
Dropzone.options.productForm =
{
// The configuration we've talked about above
autoProcessQueue: false,
uploadMultiple: false,
parallelUploads: 1,
maxFiles: 1,
paramName: "img", // The name that will be used to transfer the file
// The setting up of the dropzone
init: function()
{
var myDropzone = this;
// First change the button to actually tell Dropzone to process the queue.
// Snippet from https://github.com/enyo/dropzone/issues/418 to send without any images uploaded,
// IMPORTATNT DON'T reuse, it required changes to dropzone
$('button[type="submit"]').on("click", function (e)
{
e.preventDefault();
e.stopPropagation();
var form = $(this).closest('#product-form');
if (myDropzone.getQueuedFiles().length > 0)
myDropzone.processQueue();
else
myDropzone.uploadFiles([]); //send empty
});
// Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
// of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function()
{
// Gets triggered when the form is actually being sent.
// Hide the success button or the complete form.
});
this.on("success", function(files, response, e)
{
// Gets triggered when the files have successfully been sent.
// Redirect user or notify of error.
if (response === 'OK')
window.location = '<?= strtok($_SERVER['REQUEST_URI'], '?') ?>';
else
alert('Error: ' + response);
});
this.on("error", function(files, response, e)
{
// Gets triggered when the files have encountered an error
// Notify user of error
alert('Error: ' + response);
});
this.on("errormultiple", function(files, response)
{
// Gets triggered when there was an error sending the files.
// Maybe show form again, and notify user of error
});
},
}
</script>
</head>
<body>
<form action='CreateProduct.php' id="product-form" class="dropzone">
<legend>Add Product</legend>
<!-- Title -->
<div>
<label for="t">Title*</label>
<div>
<input id="t" name="t" type="text" />
</div>
</div>
<!-- Variant -->
<br />
<div>
<label for="v">Variant*</label>
<div>
<input id="v" name="v" type="text" />
</div>
</div>
<!-- Description -->
<br />
<div>
<label for="d">Description*</label>
<div>
<textarea id="d" name="d" type="text"></textarea>
</div>
</div>
<!-- Price -->
<br />
<div>
<label for="p">Price*</label>
<div>
<span class="currencyinput">£<input type="text" id="p" name="p"></span>
</div>
</div>
<!-- Type -->
<br />
<div>
<label for="ty">Type*</label>
<div>
<input id="ty" name="ty" type="text" />
</div>
</div>
<br />
<!-- Image Upload -->
<div id="keepSearchTogether">
<div class="dz-default dz-message" style="height:100px; margin: 0px; border: 1px; border-style: dashed; vertical-align: middle; ">Drag image here to upload (Or click for traditional menu)</div>
<div class="fallback">
<input name="img" type="file" multiple />
</div>
</div>
<!-- Stock Keeping Unit -->
<br />
<div>
<label for="sku">Stock Keeping Unit (Unique ID)</label>
<div>
<input id="sku" name="sku" type="text" value='' />
</div>
</div>
<button type="submit">Submit data and files!</button>
</form>
</body>
</html>