froala / wysiwyg-editor-java-sdk

Java SDK to ease the integration of Froala WYSIWYG Editor on server side.
https://www.froala.com/wysiwyg-editor
MIT License
15 stars 15 forks source link

無法刪除影片 #4

Closed wtfaha closed 7 years ago

wtfaha commented 7 years ago

I have a problem deleting a video; if I first upload a video, delete it and then pass on the src as null, it can not be deleted, but If I wait until I upload a new movie, will run to delete the previous film, so equal to I do not care how many videos to delete. Uploading a new film will correctly delete the previous video, but I can not find the problem. I personally suspect that src at front-end is causing the problem.

Would like to ask help on how to solve this. The following is my code:

front end:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>BBDP</title>
        <link rel="Shortcut Icon" type="image/x-icon" href="img/frame/icon.ico">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link href="frame/metisMenu/metisMenu.css" rel="stylesheet">
        <script src="frame/metisMenu/metisMenu.js"></script>
        <link href="frame/sb-admin-2/sb-admin-2.css" rel="stylesheet">
        <script src="frame/sb-admin-2/sb-admin-2.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <!-- 醫生端框架 css -->
        <link href="css/doctorFrame.css" rel="stylesheet">
        <!-- HTML編輯器 -->
        <!-- Include external CSS. -->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.css">
        <!-- Include Editor style. -->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.5.1/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.5.1/css/froala_style.min.css" rel="stylesheet" type="text/css" />
        <!-- Include external JS libs. -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.min.js"></script>
        <!-- Include Editor JS files. -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.5.1//js/froala_editor.pkgd.min.js"></script>
        <!-- languages -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.5.1/js/languages/zh_tw.js"></script>
    </head>
    <body>

        <!-- 右邊下面的HTML編輯器 -->
        <div id="HtmlEditor" class="panel-body" style="overflow-y: auto;">
            <div id="froala-editor"></div>
        </div>

        <!-- HTML編輯器 -->
        <script>
            var url = "PatientInstructionServlet";
            var froalaUrl = "InstructionFroalaServlet";
            var maxInstructionID = 0;

            //取得maxpatientInstructionID
            $(document).ready(function() {
                $.ajax({
                    url : "PatientInstructionServlet",
                    data : {
                        state : "getMaxInstructionID"
                    },
                    dataType : "json",
                    success : function(response) {
                        maxInstructionID = response;
                        froalaEdit();
                    },
                    error : function() {console.log("錯誤訊息");}
                });
            });

            function froalaEdit(){
                var height = $("div.right-content").height() - $(".right-content > .panel-heading").height() - 120 - 50;

                $(function() {
                    $('div#froala-editor').froalaEditor({
                        language: 'zh_tw',
                        placeholderText: '請輸入文章內容...',
                        height: height,
                        //>= 1200px
                        toolbarButtons: ['undo', 'redo', '|', 'fontFamily', '|', 'fontSize',  'color', '|', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '-', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', '|', 'specialCharacters', 'insertHR', 'quote', 'insertLink', 'insertTable', 'insertImage', 'insertVideo', '|', 'selectAll', 'clearFormatting', '|', 'fullscreen', 'help'],
                        //>= 992px
                        toolbarButtonsMD: ['undo', 'redo', '|', 'fontFamily', '|', 'fontSize',  'color', '|', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', '|', 'specialCharacters', 'insertHR', 'quote', 'insertLink', 'insertTable', 'insertImage', 'insertVideo', '|', 'selectAll', 'clearFormatting', '|', 'fullscreen', 'help'],
                        //>= 768px
                        toolbarButtonsSM: ['undo', 'redo', '|', 'fontFamily', '|', 'fontSize',  'color', '|', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', '|', 'specialCharacters', 'insertHR', 'quote', 'insertLink', 'insertTable', 'insertImage', 'insertVideo', '|', 'selectAll', 'clearFormatting', '|', 'fullscreen', 'help'],
                        //< 768px
                        toolbarButtonsXS: ['undo', 'redo', '|', 'fontFamily', '|', 'fontSize',  'color', '|', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', '|', 'specialCharacters', 'insertHR', 'quote', 'insertLink', 'insertTable', 'insertImage', 'insertVideo', '|', 'selectAll', 'clearFormatting', '|', 'fullscreen', 'help'],
                        fontFamilySelection: true,
                        fontSizeSelection: true,
                        fontSizeDefaultSelection: '30',
                        fontSize: ['30', '36', '40', '48', '50', '55', '60', '72', '80', '84', '96', '100', '108', '120'],
                        linkList: [{
                            text: 'Google',
                            href: 'http://google.com',
                            target: '_blank',
                            rel: 'nofollow'
                        }],
                        paragraphFormat: {
                            N: 'Normal',
                            H1: 'Heading 1',
                            H2: 'Heading 2',
                            H3: 'Heading 3',
                            H4: 'Heading 4'
                        },
                        //設置視頻上傳參數。
                        videoUploadURL: froalaUrl,
                        videoUploadParams: { state: "uploadVideo",patientInstructionID: maxInstructionID},
                        videoUploadMethod: 'POST',
                        videoMaxSize: 50 * 1024 * 1024,
                        videoAllowedTypes: [ 'webm' ,'mp4' ,'ogg' ]      //允許上傳MP4,WEBM和OGG
                    })
                    /*********************************vedio*********************************/
                    .on('froalaEditor.video.beforeUpload', function (e, editor, videos) {
                        // Return false if you want to stop the video upload.//事件在開始上傳請求之前觸發,可用於更改上傳參數或取消操作
                        console.log("beforeUpload");
                    })
                    .on('froalaEditor.video.uploaded', function (e, editor, response) {
                        // Video was uploaded to the server.//事件在成功的視頻上傳請求之後,但在編輯器中插入視頻之前觸發
                        console.log("uploaded");
                    })
                    .on('froalaEditor.video.inserted', function (e, editor, $video) {
                        console.log("inserted");
                    })
                    .on('froalaEditor.video.replaced', function (e, editor, $img, response) {
                        // Video was replaced in the editor.//將視頻替換為編輯器後觸發事件
                        console.log("replaced");
                    })
                    .on('froalaEditor.video.beforeRemove', function (e, editor, $video) {
                        console.log("beforeRemove");
                        console.log("$video.attr('src') : " + $video.attr('src'));
                    })
                    .on('froalaEditor.video.removed', function (e, editor, $video) {
                        console.log("removed");
                        //deleteVideo(e, editor, $video);   //刪除video
                        console.log("刪除video");
                        console.log("$video.attr('src') : " + $video.attr('src'));
                        $.ajax({
                            method: 'POST',                     
                            url: froalaUrl,     
                            data: {                             
                              state: "deleteVideo",
                              src: $video.attr('src')
                            }
                        })
                        .done (function (data) {
                          console.log ('Vedio was deleted');
                        })
                        .fail (function (err) {
                          console.log ('Vedio delete problem: ' + JSON.stringify(err));
                        })
                    });
                })
            }

        </script>

    </body>
</html>

back end :

import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.nio.file.Files;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import javax.servlet.http.Part;

import org.apache.commons.io.FilenameUtils;
import org.apache.commons.lang.ArrayUtils;

import com.froala.editor.Image;
import com.google.gson.Gson;

@MultipartConfig
public class InstructionFroalaServlet extends HttpServlet {
    public InstructionFroalaServlet() {
        super();
    }    
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
        response.setContentType("text/html;charset=UTF-8");
        Gson gson = new Gson();

        String state = request.getParameter("state");
        HttpSession session = request.getSession();     
        String doctorID = (String) session.getAttribute("doctorID");
        String patientInstructionID = request.getParameter("patientInstructionID");

        /*******************************************************************************************/

        String filePath = getServletContext().getRealPath("/");
        String InstructionFroalaPath = filePath + "Instruction\\"+ doctorID+ "\\" + patientInstructionID;
        File path = new File(InstructionFroalaPath);

        System.out.println("state : " + state);
        System.out.println("filePath : " + filePath);
        System.out.println("InstructionFroalaPath : " + InstructionFroalaPath);

        /*******************************************************************************************/

        if (!path.exists()) {   //如果路徑上沒有此資料夾,創一個
            System.out.println("!path.exists()");
            path.mkdirs();
        }       

        /*******************************************************************************************/

        if(state.equals("uploadVideo")){
            System.out.println("uploadVedio");

            // The route on which the file is saved.
               File uploads = new File(InstructionFroalaPath);
                System.out.println("uploads : " + uploads);

               String multipartContentType = "multipart/form-data";
               String fieldname = "file";
               Part filePart = request.getPart(fieldname);
               System.out.println("filePart : " + filePart);

               // Create path components to save the file.
               Map < Object, Object > responseData;
               final PrintWriter writer = response.getWriter();
               String linkName = null;

               try {
                    System.out.println("try");

                   // Check content type.
                   if (request.getContentType() == null ||
                       request.getContentType().toLowerCase().indexOf(multipartContentType) == -1) {

                       throw new Exception("Invalid contentType. It must be " + multipartContentType);
                   }

                   // Get file Part based on field name and also file extension.
                   String type = filePart.getContentType();
                   System.out.println("type : " + type);
                   type = type.substring(type.lastIndexOf("/") + 1);
                   System.out.println("type.substring : " + type);

                   // Generate random name.
                   String extension = type;
                   extension = (extension != null && extension != "") ? "." + extension : extension;
                   System.out.println("extension : " + extension);
                   String name = UUID.randomUUID().toString() + extension;

                    System.out.println("name : " + name);

                   // Get absolute server path.
                   String absoluteServerPath = uploads + name;

                    System.out.println("absoluteServerPath : " + absoluteServerPath);

                   // Create link.
                   String vedioPath = request.getHeader("referer");
                   //linkName = vedioPath + "files/" + name;
                   String fileRoute = "Instruction/"+doctorID+"/"+patientInstructionID+"/";
                   System.out.println("fileRoute : " + fileRoute);
                   linkName = fileRoute + name;

                   System.out.println("vedioPath : " + vedioPath);

                   // Validate file.
                   String mimeType = filePart.getContentType();
                   String[] allowedExts = new String[] {
                       "mp4",
                       "webm",
                       "ogg"
                   };
                   String[] allowedMimeTypes = new String[] {
                       "video/mp4",
                       "video/webm",
                       "video/ogg"
                   };

                   if (!ArrayUtils.contains(allowedExts, FilenameUtils.getExtension(absoluteServerPath)) ||
                       !ArrayUtils.contains(allowedMimeTypes, mimeType.toLowerCase())) {

                       System.out.println("if");

                       // Delete the uploaded file.
                       File file = new File(absoluteServerPath);

                       if (file.exists()) {
                           file.delete();
                       }

                       throw new Exception("File does not meet the validation.");
                   }

                   // Save the file on server.
                   File file = new File(uploads, name);

                   try (InputStream input = filePart.getInputStream()) {
                       System.out.println("try copy");
                       System.out.println("input : " + input);
                       System.out.println("file.toPath() : " + file.toPath().toString());

                       Files.copy(input, file.toPath());
                   } catch (Exception e) {
                    writer.println("<br/> ERROR: " + e);
                   }

               } catch (Exception e) {
                   e.printStackTrace();
                   writer.println("You either did not specify a file to upload or are " +
                       "trying to upload a file to a protected or nonexistent " +
                       "location.");
                   writer.println("<br/> ERROR: " + e.getMessage());
                   responseData = new HashMap < Object, Object > ();
                   responseData.put("error", e.toString());

               } finally {
                    System.out.println("finally");
                   responseData = new HashMap < Object, Object > ();
                   responseData.put("link", linkName);
                    System.out.println("linkName : " + linkName);

                   // Send response data.
                   String jsonResponseData = new Gson().toJson(responseData);
                    System.out.println("jsonResponseData : " + jsonResponseData);

                   response.setContentType("application/json");
                   response.setCharacterEncoding("UTF-8");
                   response.getWriter().write(jsonResponseData);
               }
        }
        if(state.equals("deleteVideo")){
            String src = request.getParameter("src");
            System.out.println("src : " + src);

            File file = new File(filePath + src);
            System.out.println("filePath + src : " + filePath + src);

            try {
                System.out.println("try delete");
                System.out.println("file.toPath() : " + file.toPath().toString());

                Files.delete(file.toPath());
            } catch (Exception e) {
                e.printStackTrace();
                response.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
                return;
            }
            response.setContentType("application/json");
            response.setCharacterEncoding("UTF-8");
            response.getWriter().write(gson.toJson("Success"));
        }

    }
}
stefanneculai commented 7 years ago

@wtfaha could you please submit issue again in English language? Thanks.