forked from froala/froala-image-uploader-example
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.php
193 lines (172 loc) · 10.2 KB
/
index.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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Froala used as image input</title>
<!-- Stylesheets-->
<link rel="stylesheet" href="vendor/froala/wysiwyg-editor/css/froala_editor.min.css">
<link rel="stylesheet" href="vendor/froala/wysiwyg-editor/css/plugins/image.min.css">
<link rel="stylesheet" href="vendor/froala/wysiwyg-editor/css/plugins/image_manager.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<h1>Update Your Profile</h1>
<!-- start example -->
<div class="well" style="max-width: 400px;">
<form action="/person.php" method="post">
<div class="form-group">
<label for="">Upload Photo</label>
<figure>
<?php
/**
* Update $file_path value depending on the folder and path the project is placed.
*/
$file_path = __DIR__ . '/storage/user1/images/image_name.txt';
$response = file_get_contents( $file_path);
if($response === false || empty($response)){
$img_src = "https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png";
}else{
$img_src = json_decode($response);
}
?>
<img id="logo" src="<?php echo $img_src; ?>" alt="User placeholder" height="100" >
<figcaption>Click on the above image to edit or replace</figcaption>
</figure>
</div>
<div class="form-group">
<label for="firstname">First Name</label>
<input class="form-control" type="text" name="firstname" placeholder="Enter your first name">
</div>
<div class="form-group">
<label for="lastname">Last Name</label>
<input class="form-control" type="text" name="lastname" placeholder="Enter your last name">
</div>
<div class="form-group">
<label>Gender</label>
<label class="checkbox-inline">
<input type="radio" name="gender" id="male" value="male">
Male
</label>
<label class="checkbox-inline">
<input type="radio" name="gender" id="female" value="female">
Female
</label>
</div>
<input type="submit" class="btn btn-primary" value="Submit">
</form>
</div>
<!--end example-->
<!--JS Scripts-->
<script src="vendor/froala/wysiwyg-editor/js/froala_editor.min.js"></script>
<script src="vendor/froala/wysiwyg-editor/js/plugins/image.min.js"></script>
<script src="vendor/froala/wysiwyg-editor/js/plugins/image_manager.min.js"></script>
<script>
const editor = new FroalaEditor('#logo',{
pluginsEnabled: ['image', 'imageManager'],
//image popup buttons
imageEditButtons: ['imageReplace', 'imageRemove'],
//Buttons for the popup menu which appears on imageReplace button click
imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
//Set the request type
imageUploadMethod: 'POST',
// Set the image upload URL.
imageUploadURL: 'upload.php',
//Set Proxy to upload images from a URL
imageCORSProxy: 'https://cors-anywhere.herokuapp.com',
// Set the image delete URL.
imageManagerDeleteURL: 'delete_image.php',
// Set the image manager upload URL.
imageManagerLoadURL: 'image_manager.php',
// Set the image manager delete URL.
imageManagerDeleteURL: 'delete_image.php',
//Validation
//set image allowed types
imageAllowedTypes: ['jpeg', 'jpg', 'png'],
// Set max image size to 10MB.
imageMaxSize: 1024 * 1024 * 10,
events: {
'image.replaced': function ($img, response) {
// this is the editor instance.
console.log(this);
//get the image link
var imgLink = $img[0].src.replace(window.location.origin, '');
//Send HTTP request to the server
var request = new XMLHttpRequest();
//set request type and target url
request.open('POST', 'store_image_link.php', true);
//Set the data that will be sent along with the request
var data = new FormData();
//send the link of the replaced image that needs to get stored
data.append('img_link', imgLink);
//send the request with the data
request.send(data);
request.onload = function() {
if (this.status >= 200 && this.status < 400) {
// request Success!
console.log ('Image successfully stored.');
} else {
// We reached our target server, but it returned an error
var err = this.response;
console.log ('Image delete problem: ' + JSON.stringify(err));
}
};
//On request failure
request.onerror = function() {
// There was a connection error of some sort
var err = this.response;
console.log ('Image delete problem: ' + JSON.stringify(err));
};
},
//delete image from the server
'image.beforeRemove': function ($img) {
//get the image link
var imgLink = $img[0].src.replace(window.location.origin, '');
//Send HTTP request to the server
var request = new XMLHttpRequest();
//set request type and target url
request.open('POST', 'delete_image.php', true);
//Set the data that will be sent along with the request
var data = new FormData();
//send the link of the replaced image that needs to get stored
data.append('src', imgLink);
//send the request with the data
request.send(data);
request.onload = function() {
if (this.status >= 200 && this.status < 400) {
// Success!
//set profile image to the placeholder image
const placeholder = document.getElementById('logo');
placeholder.src = "https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png";
//Display alert to the user
alert ('Image was successfully deleted');
} else {
// We reached our target server, but it returned an error
var err = this.response;
console.log ('Image delete problem: ' + JSON.stringify(err));
}
};
//On request failure
request.onerror = function() {
// There was a connection error of some sort
var err = this.response;
console.log ('Image delete problem: ' + JSON.stringify(err));
};
//return false to prevent Froala from removing img src before the HTTP request is completed
return false;
},
//delete image from the Image Manager
'imageManager.imageDeleted': function (response) {
response = JSON.parse(response);
if(response.is_profile_img){
//replace profile image with the placeholder image
const placeholder = document.getElementById('logo');
placeholder.src = "https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png";
}
},
} //end events object
});
</script>
</body>
</html>